前言：
今天大家对“js显示文件夹里面的图片怎么弄”都比较关切，大家都想要剖析一些“js显示文件夹里面的图片怎么弄”的相关资讯。那么小编同时在网络上网罗了一些对于“js显示文件夹里面的图片怎么弄””的相关文章，希望看官们能喜欢，我们快快来学习一下吧！vue项目中我们经常会遇到动态路径的图片无法显示的问题，以下是静态路径和动态路径的常见使用方法。
1.静态路径
在日常的开发中，图片的静态路径通过相对路径和绝对路径的方式引入。
相对路径：以.开头的，例如./、../之类的。就是相对于自己的目标文件的位置。
绝对路径：以/开头的。就是目标文件的真实路径。表示当前站点的根目录。
(1)静态相对路径
<img src="../../assets/1.png" />
<!-- 或者如下 -->
<img src="@/assets/1.png" />
(2)静态绝对路径
一般使用public下的资源
<img src="images/1.png" />
<!-- 或者如下 -->
<img src="/images/1.png" />
2.动态路径
(1)动态相对路径(使用require)
写在HTML里:
<img :src="require('../../assets/' + imageUrl)" />
或者
写在js里
<img :src="imageUrl" />
imageUrl: require('../../assets/' + this.img)
需要注意:使用require不能直接用变量接收地址，一般采用字符串模板或变量名+空字符串。以下为两种写法:
require(`${url}`); //正确用法
require(url + '')
(2)动态绝对路径
与静态引入相同。之所以这样是因为public 目录下的文件不会被编译，部署后可以通过绝对路径获取到。如果还放在原来的 assets 目录中，就会被webpack打包成新的文件夹。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js显示文件夹里面的图片怎么弄 #js判断路径下图片是否存在
