关于在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} />
原文地址:https://blog.csdn.net/qq_40830369/article/details/120326174
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。