webpack中img标签的src使用相对路径的方法
webpack
目前已经是大部分前端项目打包工具的首选,但是在使用的过程中还是存在一些问题。我们下面要讲到的就是常见的关于图片路径的问题。
tips: 解决方案在最后一节
img的src问题及其原因
在webpack项目中,如果要直接使用 img
的 src
属性来引用图片,由于webpack
对html中图片的相对路径的处理方式的问题发现图片并不能正确的引用。webpack对图片的处理方式如下:
默认情况下,vue-loader
使用 css-loader
和 Vue
模版编译器自动处理样式和模版文件。在编译过程中,所有的资源路径例如 <img src="...">
、background: url(...)
和 @import
会作为模块依赖。
例如,url(./image.png)
会被转换为 require('./image.png')
,而
<img src="../image.png">
将会编译为:
createElement('img', { attrs: { src: require('../image.png') }})
常见的解决方案及不足
在日常的项目中,如果某处样式需要使用图片,那我们常见的处理方法一般有几种:
1、 使用css background
来使用图片
不足:需要使用其他标签来替换img标签
.img { background-image: url('../assets/test.png'); }
这种方式一般webpack
的配置中有使用 url-loader
来处理图片资源,小于一定尺寸的图片会被编译成base64
内嵌在样式中。正常的图片都会被正确的打包到指定文件夹。
2、 使用 require
的方式引入图片,并将其动态绑定到src
上面。
不足:需要没张图片都使用require
引入
例如:
<img :src="imgs[0].src" />
data () { return { imgs: [{ src: require('../assets/test.png') }] } } ...
3、 使用图床,提前将图片资源上传至服务器,src中直接使用图床的图片地址即可。
不足:需要搭建图床,并且也可能存在测试环境和生产环境地址不一的问题
修改webpack配置,直接使用相对路径
在某些时候,我们必须要使用img
标签,那么这时候,我们只能采用上面方案中的第2或3种,第2种的代码略显臃肿,第3种又需要构建图床。如果对于 webpack
的url-loader
的文档有仔细阅读的话我们可以发现通过修改webpack
配置完全可以支持我们在src
中直接使用相对路径。
{ test: /\.(png|jpe?g|gif|webp)(\?.*)?$/, use: [ { loader: 'url-loader', options: { limit: 1024 * 4, esModule: false, fallback: { loader: require.resolve('file-loader'), options: { name: `img/[name].[hash:8].[ext]` } } } } ] },
这种方式会将我们在src
中的图片复制到打包后文件夹下的img
文件夹内并添加hash
值,这时候我们在代码中就可以直接使用相对路径了。例如:
<img src="../assets/test.png" />
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » webpack中img标签的src使用相对路径的方法