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')
    }]
  }
}
...

{
  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]`
          }
        }
      }
    }
  ]
},

<img src="../assets/test.png" />

以上关于webpack中img标签的src使用相对路径的方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。