当我们在做一些类似于轮播图或者其他情况动态访问一些图片的时候,如果遇到了图片资源访问404的时候要考虑到:
脚手架会在底层自动对src目录下的东西进行文件指纹加密,这就导致我们项目中使用动态访问资源路径出现问题。
如果你是将路径写在下面这几个地方的话那就不会出现问题:
1.css中的静态路径。backgroud-image:url('xxx')
2.img中的src(静态路径)
3.import()语句中
4.URL
p3就是通过import('xxxx')先将图片导入,再通过.then的方式就可以拿到打包后的path,但是生成的dist目录中会有问题就是会每个img图像多一个js,用来导出的.
p4就是通过创建一个new URL()对象,()中传入一个带有动态和静态的组合路径,然后后边传入当前页面的URl最后返回的值里边就会有对应打包后的产物,且代码结构并为改变,非常好用.
注意:放在public中的文件不会添加上文件指纹加密,所以如果对这个要求不高的也可以放在public中
静态资源的动态访问
最新推荐文章于 2024-06-28 22:28:59 发布