Vue中img标签src属性绑定

时间:2023-01-29 23:27:37

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

我做的是一个基于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’

 

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

 

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

Vue中img标签src属性绑定

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

 

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

html部分:

<img :src="imgUrl"/>

js部分:

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

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

 

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