static图片编译了 vue_详解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这个配置属性的具体其他用法大家可以去官网看看，或者看看源码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
static图片编译了 vue_详解vue-cil和webpack中本地静态图片的路径问题解决方案相关推荐
- vue 直接访问静态图片_vue中本地静态图片路径写法
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧 这里写图片描述 需求:如何components里面的index.vue怎样能把assets里面的 ...
- layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法
详解Vue.js和layui日期控件冲突问题解决办法 发布于 2020-8-10| 复制链接 摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...
- slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
- 详解 Vue 目录及配置文件之 build 目录
详解 Vue 目录及配置文件之 build 目录 1.1 项目目录介绍 目录/文件 说明 详解 build 项目构建(webpack)相关代码 详解 config 配置目录,包括端口号等 详解 nod ...
- vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式 在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
- linux PHP 编译安装参数详解
linux PHP 编译安装参数详解 ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc -- ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
- 详解Vue中watch的高级用法
转载自 详解Vue中watch的高级用法 我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
- vue调用手机相机相册_详解Vue调用手机相机和相册以及上传
组件 选中{{imgList.length}}张文件,共{{bytesToSize(this.size)}} javaScript代码 export default { name: "cam ...
最新文章
- SQL Server 存储过程的分页方案比拼
- Fiddler （三） Composer创建和发送HTTP Request
- java bufferarray_如何使用Java的ByteBuffer.arrayOffset()方法
- Enable-Migrations出错
- 谷歌浏览器正式版90_谷歌浏览器 Google Chrome v79.0.3945.88 正式版
- https和http的主要区别
- jdbc c3p0 mysql_JDBC + MySQL使用c3p0连接池
- 微信推出QQ小程序遭网友吐槽：请不要俄罗斯套娃
- 微信商品详细信息页面html,微信小程序商品展示页面(仿咸鱼)
- 解决krpano全景视频在QQ浏览器、安卓不能正常播放的问题
- Java Servlet系列之Servlet入门
- ExtDeprecationWarning: Importing flask.ext.bootstrap is deprecated, use flask_bootstrap instead.
- 技术晨读_20160217
- 计算机的平方根的符号是哪个,平方根
- 上学期间你收到最感动的小纸条是什么？
- 两个对称正定阵的乘积是正定的吗？
- 使用U盘制做CentOS7.6安装盘并安装CentOS7.6系统
- 苹果如何不显示云服务器照片,iPhone12如何隐藏照片 iPhone12不显示照片的三种方法...
- 【uniapp小程序】request发起请求
- Spring Ioc