vue中img的src动态赋值（本地图片的路径）

Posted 2023-04-25

参考技术A 如果做的是纯静态的网站展示，有许多的本地静态资源需要加载，里面包括本地数据和本地图片混合的好几组，建议使用static方式。其他情况下建议使用require方式

vue中img的src绑定

参考技术A 在平常的处理中，img的src通常采用相对路径的方式来指定，然而在Vue中通过‘：src’动态绑定时不能如此，图片会加载失败。
也就是说，静态结构时，图片地址这样设置就可以正常显示：

而动态结构时，这样就不行

注意如果写成了

那就更加的错误了

这是因为网页会把根域作为相对路径的根目录，然而我们文件的路径是相对于项目文件的根目录的，当然就找不到了。而通过vue-cli建的文件结构中，有一个叫做static的文件夹，是存放静态文件的，这个文件夹下的文件会按照原本的结构放在网站根目录下。这时再使用‘/static.......’这样的路径就可以访问这些静态文件了。

第二种办法是使用require()包裹相对路径
html部分：

js部分：