React 中插入图片的三种方式

使用import 导入
import React, { Component } from ‘react’
import logo from “…/asset/worker.png”
export default class Md extends Component {
render() {
return (

)
}
}
需注意，导入的文件需在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 (

{/* 页面中 /}

<img src={require(“…/asset/worker.png”)} alt=“” />
{/ 背景图 /}

{/ <div style={{backgroundImage: “url(” + require(“…/asset/worker.png”) + “)”}}>

*/}

)
}
}
可以使用require按照原生css的方式拼接路径，也可也提前导入图片路径直接${路径}，也可使用行内样式添加
————————————————
版权声明：本文为CSDN博主「Ynlce」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Ydesk116/article/details/125849249