vue-cil和webpack中本地静态图片的路径问题解决方案

 

1 本地图片动态绑定img的src属性

通常咱们在html中或者vue组件文件中引用图片是这样，这是不须要作特别处理的

咱们将图片放入assets中或者从新创建个文件夹img什么的均可以，随意～

可是咱们这时候可能会有个需求就是咱们要动态绑定一组本地图片

1 将图片当成模块先引进来，再绑定

 

可是这种作法局限性比较大，模块化差，代码很差看 。

若是我作的是纯静态的网站展现，有许多的本地静态资源须要加载，里面包括本地数据和本地图片混合的好几组，那不是要麻烦死～

 

1.1 因此咱们须要三步

第一步咱们在src下面创建一个json文件夹里面放置静态的json数据

 

第二步将全部的静态图片资源放在和src同级目录下的static文件夹下

第三步你的路径能够写成天然的'../../static/img/xxx.png' 也能够按照红框中的写法（这种写法对应的是编译后文件的目录）

 这样子按照日常的动态绑定src属性你的图片路径在开发模式下和生产模式下的图片资源路径都是不会出问题的

1.2 小问题

但也有个问题就是这种方式引用图片是不会被url等加载器处理的

上面的红框都是这种方式，最下面的红框是用require的方式将图片引进来的（被当成模块被url-loader处理，加入了hash值）

这个须要看网站自己的性质和具体业务以及我的取舍了，固然也能够混合着用，灵活一点没有死的处理方法！

 

 

2 css中的本地图片路径在打包后的问题

你的项目在开发模式下css中用url（）引用图片是正常的，可是打包后图片路径却并无被处理或者说特别怪异

致使本地图片资源没法加载，是否是有这样的困惑？

只须要在原有的一个插件上添加一段代码便可：

 

这个插件你们又应该都比较熟悉，就是将css从打包中单独提取出来做为一个文件夹，上面这个是vue-cil的编译模板，你们能够根据这个参考一下

publicPath这个配置属性的具体其余用法你们能够去官网看看，或者看看源码。了解更多

 

以上～