最近刚刚完成了自己的毕业设计项目,整理一下过程中遇到的问题吧~~~
我做的是一个基于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目录下,然后将服务器返回的数据在渲染到页面前进行修改。代码如下:
这时就发现,图片成功地渲染到了页面上,目标达成。
另外,如果说不想调整目录结构的话,还有一个方法 -- 直接传入图片编码。
html部分:
<img :src=
"imgUrl"
/>
js部分:
imgUrl = require('./assets/logo.png')
这样可以读到项目路径下的图片,但是,因为CommonJS只允许使用字符串字面量,所以这种方法使用起来不够灵活。
总而言之,将静态文件放入static文件夹下还是最好的办法。