在vue页面中用img显示图片，有几种方式引入资源？

Question

data(){

 return{
    img:require("../../../static/imgs/advance/icon_1.png"),
    
    ===============
    
    上面这种方式有什么特点，那个repuire是属于 es6  还是 webpack ?
    
    
    ==============
    还有其他什么方式引入呢？

Answer 1

两种，按照约定俗成的习惯，不经过webpack处理的放在static，需要经过处理的放assets：

1. 一种是不经过webpack处理，直接写绝对路径拿static里的文件，直接写/static/xx/xxx.png。
2. 一种是经过使用webpack处理，不管是require还是import，使用如你所写的方式主动引入，并声明未一个变量，后续使用这个变量。

---

注意只有在js逻辑里跑的代码，才需要使用主动引入的方式，毕竟，代码开始执行跑在客户端的时候是没有webpack环境的，向你直接在template中写的<img src="../../assets/xx.png">是会直接走webpack的。

Answer 2

1. require 是 CommonJS 格式
2. es6 使用 import

其他引入的方式可以了解下js模块化发展