react图片引入

4,571 阅读1分钟
  • 引入单张图片 方法一
<img src="../../assets/gallery/1.png" } />  //错
<img src="../../../public/gallery/1.png" /> //错
<img src="/gallery/1.png"  />               //对

方法二

//在src文件中,引入相对路径
<img src={require('../../assets/gallery/1.png')} />
//不在src文件中,引入绝对路径,需要在配置文件配置
<img src={require('绝对定位')} />

方法三

import imgURL from './../images/photo.png';
...
...
<img src={imgURL } />
  • 批量引入文件 方法一
const maths = {
    fixedView1 : "" ,
    fixedView2 : "" ,
    fixedView3 : "" ,
}
const ticks = Object.keys(maths).map(item => require("../../../images/homeImg/" + item + ".png"))

方法二

const demoImgArr = ["demo1" , "demo2" , "demo3"]
const ticks = demoImgArr.map(item => require("../../images/" + item + ".jpg"))