详解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这个配置属性的具体其他用法大家可以去官网看看,或者看看源码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 分享张戈博客的在线影音源代码
- go语言base64加密解密的方法
- Oracle 12c数据库优化器统计信息收集的最佳实践(一)
- Go语言轻量级线程Goroutine用法实例
- 仿异次元百度分享工具条张戈修改版
- Go语言的队列和堆栈实现方法
- 妹子你真萌:一次心惊肉跳的服务器误删文件的恢复过程
- Go语言使用sort包对任意类型元素的集合进行排序的方法
- Oracle 12c ASM专题|Flex Diskgroup相关概念
- 移动搜索SEO分享:利用Meta声明来做百度开放适配
- 百度分享无法抓取图片及摘要的折中解决办法
- Golang 持久化
- Golang context 包入门
- 动手实现一个JSON验证器(上)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 您应该知道的11个JavaScript和TypeScript速记
- AkShare-中国宏观-央行货币当局资产负债
- AkShare-中国宏观-FR007利率互换曲线
- Github标星59.7k:用动画的形式呈现解LeetCode题目的思路
- 《爱情公寓》电影版,十年一瞬间(下)
- 实战:上亿数据如何秒查
- 《爱情公寓》电影版,十年一瞬间(上)
- Ajax爬取今日头条街拍美图
- 现在的房租有多高(杭州)?
- 英雄联盟皮肤大拼图
- Python爬虫-MongoDB
- Python爬虫-selenium
- 用Python识别图形验证码,实现自动登陆!
- 当Docker遇到Intellij IDEA,再次解放了生产力~
- 用Python爬取自主品牌汽车,看看国产汽车究竟长什么样?(上)