React 中插入图片的三种方式

Ynlce

已于 2022-11-11 15:31:12 修改

阅读量5.5k

点赞数 6

分类专栏： React 文章标签： react.js 前端 javascript

于 2022-07-18 15:11:25 首次发布

本文链接：https://blog.csdn.net/Ydesk116/article/details/125849249

版权

React import require 图片导入背景图

关键词由CSDN通过智能技术生成

React 专栏收录该内容

1 篇文章

订阅专栏

使用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的方式拼接路径，也可也提前导入图片路径直接${路径}，也可使用行内样式添加