为什么Vue里面如果用代码控制img，src必须用require(路径)，而不能直接src=路径？

Question

为什么Vue里面如果用代码控制img，src必须用require(路径)，而不能直接src=路径？

同时，我发现
require(变量)不行
require(字符串+变量)可以
这又是怎么回事

Answer 1

这个是webpack的原因

Answer 2

感觉可以这样看问题

HTML的img标签的src是有两种, 绝对路径/相对路径, 相对路径可以转成绝对路径

比如: http(s)://www.example.com/1.jpg

前面http(s)://www.example.com 指明那一台Web服务器, /1.jpg是相对于服务器所设置的根目录, 比如\www\my-site\, 所以这里的寻址是相对于web服务器所设置的更目录的

那么问题是为什么到了Vue里面, 为什么img标签可以写相对于源码的目录, 通过变量传递字符串就不行呢?

现在Vue项目一般都会经过Webpack之类的打包工具, 在解析template里面, 解析img标签的时候, 如果src是静态字符串, 如果不是http开头的, 那么就是相对于源码目录的图片

那么如果把src设置为一个变量, 那么template里解析img标签的时候并不知道src的值, 是不是http开头的, 需要运行时才知道, 所以需要你告诉构建工具, 项目使用了这个图片资源, 然后返回相对于web服务器根目录的路径(dist目录也行)

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

Answer 3

require 是走编译了。
你单纯一个字符串，谁知道是图片还是什么东西。

Answer 4

你用代码控制img，代码不运行怎么知道结果呢？

---

https://webpack.js.org/guides...