龙空技术网

打包之后文件、图片、背景图资源不存在或者路径错误的问题

广漂程序猿DevinRock 33

前言:

现在同学们对“css图片相对路径”大概比较讲究,咱们都想要分析一些“css图片相对路径”的相关内容。那么小编也在网络上网罗了一些对于“css图片相对路径””的相关知识,希望姐妹们能喜欢,咱们一起来学习一下吧!

打包之后文件、图片、背景图资源不存在或者路径错误的问题

先看下项目的config文件夹下的index.js文件,这个配置选项就好使我们打包后的资源公共路径,默认的值为‘/’,即根路径,所以打包后的资源路径为根目录下的static。

由此问题来了,如果你打包后的资源没有放在服务器的根目录,而是在根目录下的mobile等文件夹的话,那么打包后的路径和你代码中的路径就会有冲突了,导致资源找不到。

所以,为了解决这个问题,你可以在打包的时候把上面这个路径由‘/’的根目录,改为‘./’的相对路径。

这样的的话,打包后的图片啊js等路径就是‘./static/img/asc.jpg’这样的相对路径,这就不管你放在哪里,都不会有错了。

但是,凡是都有但是~~~~~这里一切正常,但是背景图的路径还是不对。因为此时的相对就变成了static/css/文件夹下的static/img/xx.jpg,但是实际上static/css/文件夹下没有static/img/xx.jpg,即static/css/static/img/xx.jpg是不存在的。此时相对于的当前的css文件的路径。所以为了解决这个问题,要把我们css中的背景图的加个公共路径‘../../’,即让他往上返回两级到和index.html文件同级的位置,那么此时的相对路径static/img/xx.jpg就能找到对应的资源了。

那么怎么修改背景图的这个公共路径呢,因为背景图是通过loader解析的,所以自然在loader的配置中修改,打开build文件夹下的utils文件,找到exports.cssLoaders的函数,在函数中找到对应下面这些配置:

找到这个位置,添加一上配置,就是上图红框内的代码,就可以把它的公共路径修改为往上返回两级。这样再打包看下,就ok了!

标签: #css图片相对路径 #css背景图片不显示怎么回事 #jsimg路径 #js判断路径下图片是否存在 #css添加背景图片显示不出来

上一篇古建商业街设计案例效果图

下一篇没有了