React 中插入图片的三种方式

使用import 导入

import React, { Component } from 'react'
import logo from "../asset/worker.png"
export default class Md extends Component {
  render() {
    return (
      <div>
        <img src={logo} alt="" />
      </div>
    )
  }
}

需注意，导入的文件需在src路径下，否则会报错

使用require直接导入路径

 <img src={require("../asset/worker.png")} alt="" />

需注意require中不可使用变量，但可以使用变量拼接字符串，若使用了该方法后，图片不显示，页面也没有报错提醒，是因为require是动态加载，import是静态编译，可以修改为第一种方法，或者在后面加上 .default

<img src={require("../asset/worker.png").default} alt="" />

插入背景图

import React, { Component } from 'react'
import logo from "../asset/worker.png"
export default class Md extends Component {
    state={
        bg:{
            backgroundImage: "url(" + require("../asset/worker.png") + ")",
            // backgroundImage: `url(${logo})`,
            width:"300px",
            height:"300px",
        }
    }
  render() {
    return (
      <div>
        {/* 页面中 */}
        <img src={logo} alt="" />
        <img src={require("../asset/worker.png")} alt="" />
        {/* 背景图 */}
        <div style={this.state.bg}></div>
        {/* <div style={{backgroundImage: "url(" + require("../asset/worker.png") + ")"}}></div> */}
      </div>
    )
  }
}

可以使用require按照原生css的方式拼接路径，也可也提前导入图片路径直接${路径}，也可使用行内样式添加