vue教程-assets目录下的图片显示-马育民老师

# 说明

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

### 好处

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

- 脚本和样式表会被压缩且打包在一起，即：编译后，图片在 `.js` 文件中，不会在 `dist/img` 目录下，只请求 `.js` 即可，**不用请求图片**
**注意：**图片大小要 **小于 `8KiB`**，否则不会包含在 `.js` 文件中，而是将图片复制到 `dist/img` 目录下。可以设置大小，详见下面

- 文件丢失会直接在 **编译时报错**，而不是到了用户端才产生 404 错误。

- 最终生成的文件名包含了内容哈希，因此你 **不必担心浏览器会缓存** 它们的老版本。

参考 [官网](https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9 "官网")

# 显示图片

### 使用相对路径

下面写法，打包后，路径转换为：`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" > 
    </div>
</template>
<script>
export default {
  data () {
    return {
      // 1. required引入图片 （这里使用相对路径，使用绝对路径也可以）
      cat: require('../assets/cat.jpg'),
    }
  }
}
</script>
```

### import 形式引入

```
<template>
    <div>
      <img :src="cute" > 
    </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

原文出处：http://malaoshi.top/show_1IX7Cm97xS7z.html