Vue里面如果用代码控制img，src必须用require(路径)，而不能直接使用src=路径的方式

HTML的img标签的src是有两种, 绝对路径/相对路径, 相对路径可以转成绝对路径
比如: http(s)😕/www.baidu.com/test.jpg
前面http(s)😕/www.baidu.com 指明那一台Web服务器, /test.jpg是相对于服务器所设置的根目录, 比如\www\picture, 所以这里的寻址是相对于web服务器所设置的根目录的
那么问题是为什么到了Vue里面, 为什么img标签可以写相对于源码的目录, 通过变量传递字符串就不行呢?
现在Vue项目一般都会经过Webpack之类的打包工具, 在解析template里面, 解析img标签的时候, 如果src是静态字符串, 如果不是http开头的, 那么就是相对于源码目录的图片
那么如果把src设置为一个变量, 那么template里解析img标签的时候并不知道src的值, 是不是http开头的, 需要运行时才知道, 所以需要你告诉构建工具, 项目使用了这个图片资源, 然后返回相对于web服务器根目录的路径(dist目录也行)

require(‘xx.jpg’)的作用就是把图片复制到dist目录下的某个目录(根据你的配置), 然后返回相对web服务器根目录的相对路径字符串, 这个是构建时就返回了