关于在react项目中img标签src的路径问题

关于在react项目中img标签src的路径问题

​ 公司要求开发一个静态页面，那这当然需要用img标签放些图片作为背景。之前我的做法是把images这个文件夹放在站点的子目录里面，然后通过站点ip加上路径就可以直接访问到，类似这样：

//10.0.249.15为该站点ip，斜杠“/”后面表示为路径。
http://10.0.249.15/secssc/images/background3.png

​ 然后这样就把路径写死了，换个环境显然是行不通的。

​ 那就把img放在本地路径呗。类似这样

<img src="../../images/xxxxx.png" />

​ 但是这样写图片并不加载出来。可能是编译的时候找不到这个路径了。

所以换了一个写法。通过import的方法将图片源路径引入，这里使用相对路径。

import luohudongtai from "../../images/luohudongtai.png";

路径直接为引入的此图片（经测试，也可以是数组）

const luohudongtaiURL = luohudongtai;

然后子组件可直接根据此值设置图片 src。因为现在这个路径实际上是用变量的样子代替，所以在标签里面用{}包裹。

<img src= {luohudongtaiURL} />