vue中html标签怎么放置图片src,解决Vue中img标签src属性绑定问题

最近刚刚完成了自己的毕业设计项目，整理一下过程中遇到的问题吧~~~

我做的是一个基于Vue的信息资讯展示与管理平台，显示首页、详情页等的文章内容时就涉及到了图片展示，项目初始时我搭建的是静态网页结构，这时的图片是可以正常显示的，但是能够通过axios发送请求获取数据后，想通过 :src 的方式绑定图片路径是却失败了，于是我查询了一些相关文章，找到了解决的办法。

静态结构时的代码，图片可以正常显示：

数据绑定时候的代码，图片无法显示：

// 数据库表中article_file中存储的值的格式为‘../../../src/static/font/arrow0-0.png’

于是我开始找原因：目录结构是有问题的，回头看vue-cli的文件结构，发现其中有一个叫做static的文件夹。图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，就可以访问这些静态文件了。

所以，我将图片这种静态资源文件放到了static目录下，然后将服务器返回的数据在渲染到页面前进行修改。代码如下：

这时就发现，图片成功地渲染到了页面上，目标达成。

另外，如果说不想调整目录结构的话，还有一个方法 -- 直接传入图片编码。

html部分：

js部分：

imgUrl = require(‘./assets/logo.png‘)

这样可以读到项目路径下的图片，但是，因为CommonJS只允许使用字符串字面量，所以这种方法使用起来不够灵活。

总而言之，将静态文件放入static文件夹下还是最好的办法。