vuecli中引入图片的方式

 

因为通过require方法拿到的文件地址，是资源文件编译过后的文件地址（dist下生成的文件或base64文件），因此可以找对应的文件，从而成功引入资源。

1.正确引入方式：

<img src="./assets/images/01.jpg" alt=""> // √
// 编译后:
<img src="/img/01.f0cfc21d.jpg" alt="">
常见的引入方式，路径是固定的字符串，图片会被webpack处理，文件若丢失会直接在编译时报错，生成的文件包含了哈希值

2.正确引入方式：

当路径的文件名需要拼接变量的时候，可使用 require() 引入，在 template 的:src 或者 script 的 data computed 中都可以进行 require 引入或拼接

以下三种引入当时都可以：

<img :src="require('./assets/images/03.jpg')" alt=""> // √

<img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √

<img :src="img3" alt=""> // √

<script>

export default:{

    data(){

        return {

          imgName:'03.jpg',

          img3:require('./assets/images/03.jpg'),

        }

      },

}

</script>

// 编译后:

<img src="/img/03.ea62525c.jpg" alt=""></img>