情况三：
很多人在相对路径无法正确显示的同时，尝试进行了使用绝对路径变量引入，显然这种情况下也是不能显示图片的，因为图片资源未被手动引入。注意： 很多同学尝试手动引入资源然后按照绝对路径变量绑定 src，发现 dist/static/img/ 路径下确实有了被引用的资源，但是 vue-cli webpack 模版中 url-loader 对于 img 类型的文件在加载时，添加了 hash 值的处理。在这种情况下，即使我们绑定的是绝对路径变量，因为无法正确匹配被添加 hash 值的图片文件，我们还是无法正确的引用到图片。在这种需要手动引入图片的情况下，推荐情况四的处理方式。
情况四：
在模版中 src 属性直接绑定手动引入的图片资源，这种情况下可以正确的显示图片。这样的方式也是 vue-loader 在处理自动引入路径对应的资源时使用的办法。
综上，在 vue 单文件组件中，正确的显示一个图片的关键：
该图片资源被 require 或 import ，即会被 webpack 的 url-loader 处理到最后的目录中
img src 属性需要被替换为最后的图片资源路径
以上两点缺一不可。情况一以及情况四最后之所以能够正确的显示了图片，就在于两种情况下满足了以上两个条件。情况一中 vue-loader 自动帮我们做了这个事情，情况四我们手动做了这个事情。
开发中可能遇到的问题：
开发中可能会遇到循环渲染一个图片列表的场景，根据上面的总结，我们可以构造一个图片信息对象数组，比如：
<template>
<div id="app">
<!-- 1. 模版中 src 选项直接写相对路径 -->
<img src="./assets/small.png" alt="图片相对路径测试">
<!-- 2. 模版中 src 选项绑定相对路径字符串 -->
<img :src="relative_img" alt="图片相对路径测试">
<!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
<img :src="absolute_img" alt="图片绝对路径测试">
<!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
<img :src="smallImg" alt="图片测试">
<!-- 5. 循环加载图片资源示例 -->
<img
v-for="image in imgList"
:key="image.id"
:src="image.src"
:alt="image.title">
</div>
</template>
<script>
import smallImg from './assets/small.png';
import bigImg from './assets/big.jpg';
export default {
name: 'app',
data() {
return {
smallImg: smallImg,
relative_img: './assets/small.png',
absolute_img: '/static/img/small.png',
imgList: [
{ id: 1, title: 'test1', src: require('./assets/logo1.png') },
{ id: 2, title: 'test2', src: require('./assets/logo2.png') },
{ id: 3, title: 'test3', src: require('./assets/logo3.png') },
