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

74 阅读 0 评论 49 点赞

我是靠谱客的博主开朗导师，最近开发中收集的这篇文章主要介绍关于在react项目中img标签src的路径问题关于在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} />

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。