vue 图片引入的各种方式

静态资源可以通过两种方式进行处理：

在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

直接使用

访问 src/assets/images 目录

<img src="@/assets/images/1.png" >
<img src="../../assets/images/1.png" />
1
2

访问 public 目录
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

<img src="/img/1.png" />
1

动态变量的使用

直接使用变量

<img :src="`https://cdn.xxx.com/images/${type}.png`" />
<img :src="type + '/images/banner.jpg'" alt="" />
1
2

require 方式

<img :src="require('@/assets/images/'+ type +'.png')" />
1

或者

<img :src="img" />
<script>

export default {
    data(){
        return {
            img: require('@/assets/images/1.png'),
        }
    }
}
script>
1
2
3
4
5
6
7
8
9
10
11

import 方式

<img :src="img" />
<script>
import img from '@/assets/images/1.png'
export default {
    data(){
        return {
            img: img,
        }
    }
}
script>
1
2
3
4
5
6
7
8
9
10
11

何时使用 public 文件夹

你需要在构建输出中指定一个文件的名字。
你有上千个图片，需要动态引用它们的路径。
有些库可能和 webpack 不兼容，这时你除了将其用一个独立的