Vue中img标签src属性绑定

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

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

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

<img src="../../../src/static/font/arrow0-0.png" alt="">

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

<img :src="item.article_file" alt="">  // 数据库表中article_file中存储的值的格式为‘../../../src/static/font/arrow0-0.png’

 

　　解决上面的问题有两种方式：

　　1.使用绝对路径

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

 

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

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

 

　　2.使用 require() 包裹相对路径

　　html部分：

<img :src="imgUrl"/>

　　js部分：

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