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

本文介绍了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这个配置属性的具体其他用法大家可以去官网看看，或者看看源码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # webpack  # 图片路径  # 路径  # cli  # 静态资源路径  # vue中本地静态图片路径写法  # vue中input标签上传本地文件或图片后获取完整路径的解决方法  # vue 图片转base64本地路径跨域方式  # vue中img src 动态加载本地json的图片路径写法  # vue中本地静态图片的路径应该怎么写  # 绑定  # 的是  # 都是  # 有个  # 加载  # 模式下  # 这是  # 引进来  # 放在  # 是这样  # 有许多  # 要做  # 给大家  # 但也  # 作为一个  # 我做  # 只需要  # 或者说  # 不需  # 比较大 

相关文章： 如何高效完成自助建站业务培训？  宝塔新建站点为何无法访问？如何排查？  长沙企业网站制作哪家好,长沙水业集团官方网站？  高防服务器租用如何选择配置与防御等级？  建站之星后台密码如何安全设置与找回？  如何在景安服务器上快速搭建个人网站？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  制作公司内部网站有哪些,内网如何建网站？  如何通过智能用户系统一键生成高效建站方案？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  建站之星代理商如何保障技术支持与售后服务？  制作网站公司那家好,网络公司是做什么的？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  建站VPS配置与SEO优化指南：关键词排名提升策略  建站之星后台管理：高效配置与模板优化提升用户体验  如何快速搭建高效WAP手机网站吸引移动用户？  香港网站服务器数量如何影响SEO优化效果？  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  如何在Windows环境下新建FTP站点并设置权限？  如何通过虚拟主机快速搭建个人网站？  如何在建站宝盒中设置产品搜索功能？  制作企业网站建设方案,怎样建设一个公司网站？  如何在IIS服务器上快速部署高效网站？  整人网站在线制作软件,整蛊网站退不出去必须要打我是白痴才能出去？  html制作网站的步骤有哪些,iapp如何添加网页？  建站主机空间推荐 高性价比配置与快速部署方案解析  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换    宝塔建站助手安装配置与建站模板使用全流程解析  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  宝塔Windows建站如何避免显示默认IIS页面？  北京网站制作的公司有哪些,北京白云观官方网站？  微信h5制作网站有哪些,免费微信H5页面制作工具？  如何打造高效商业网站？建站目的决定转化率  小程序网站制作需要准备什么资料,如何制作小程序？  西安专业网站制作公司有哪些,陕西省建行官方网站？  如何在IIS中配置站点IP、端口及主机头？  网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？  如何用花生壳三步快速搭建专属网站？  佛山企业网站制作公司有哪些,沟通100网上服务官网？  h5在线制作网站电脑版下载,h5网页制作软件？  网站制作软件有哪些,制图软件有哪些？  如何通过网站建站时间优化SEO与用户体验？  在线教育网站制作平台,山西立德教育官网？  香港服务器租用每月最低只需15元？  赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  山东网站制作公司有哪些,山东大源集团官网？