react 引入图片

react 中引入图片不能像 HTML 或 vue 中，直接在 src 写路径，而是需要 import 引入，或者使用 es5 语法中的 require

import 引入

需要注意的是，这种方法有局限性，引入图片的格式只能是 bmp、gif、jpg、jpeg 和 png

import logo from '../assets/images/logo.png'

...

render(){
    return (
        <div>
            <img src={logo} />
        </div>
    )
}

require 引入

require 方式引入时，路径必须是字符串，不能是变量

render(){
    return (
        <div>
            <img src={require("../assets/images/logo.png")}
        </div>
    )
}

//背景图片的引入
backgroundImage: `url(${require("../assets/images/logo.png")})`

在线图片的引入

直接写在线图片的路径

render(){
    return (
        <div>
            <img src="https://pics1.baidu.com/feed/0d338744ebf81a4cd42f0ea4fc6ba55c252da601.jpeg?token=c587fe05e180992d894cfb18402f413c&s=9E01E04CC0575FD61B372D120300D0D0" />
        </div>
    )
}