说明

src/assets 是项目必用图片的，例如图标，logo等

好处

推荐将图片作为 模块依赖 进行导入，这样它们会通过 webpack 的处理，如下好处：

脚本和样式表会被压缩且打包在一起，即：编译后，图片在 .js 文件中，不会在 dist/img 目录下，只请求 .js 即可，不用请求图片
注意：图片大小要 小于 8KiB，否则不会包含在 .js 文件中，而是将图片复制到 dist/img 目录下。可以设置大小，详见下面
文件丢失会直接在 编译时报错，而不是到了用户端才产生 404 错误。
最终生成的文件名包含了内容哈希，因此你 不必担心浏览器会缓存 它们的老版本。

显示图片

使用相对路径

下面写法，打包后，路径转换为：require(\"@/assets/6.png\")

<img alt="Vue logo" src="../assets/6.png">

使用绝对路径

下面写法，打包后，路径转换为：require(\"@/assets/7.png\")

<img alt="Vue logo" src="@/assets/1.jpg">

require 形式引入

<template>
    <div>
      <img :src="cat" > <!-- 3. 显示图片 -->
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 1. required引入图片 （这里使用相对路径，使用绝对路径也可以）
      cat: require('../assets/cat.jpg'),
    }
  }
}
</script>

import 形式引入

<template>
    <div>
      <img :src="cute" > <!-- 3. 显示图片 -->
    </div>
</template>
<script>
// 1. import图片（这里使用绝对路径，使用相对路径也可以）
import cute from '@/assets/cute.jpg'
export default {
  data () {
    return {
      cute   // 2. data中注册图片
    }
  }
}
</script>

url转换规则

如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
如果 URL 以 . 开头，它会作为一个 相对模块 请求被解释且基于你的文件系统中的目录结构进行解析。
如果 URL 以 @ 开头，它也会作为一个模块请求被解析(作用于模版中)

验证图片是否在.js文件中

执行下面命令打包：

npm run build

上面用到的图片，不会在 dist/img 目录下，根本找不到，因为包含在 .js 文件中

修改图片大小

如果将 4k 以下的图片，才打包到 .js 文件中，可进行下面修改

修改 vue.config.js 文件，如下：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .set('parser', {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4KiB
          }
        })
  }
}

参考：
https://www.cnblogs.com/linzhifen5/p/11771662.html
https://blog.csdn.net/qq_43780814/article/details/121628654
https://blog.csdn.net/Start2019/article/details/120074411