Vue如何在data中正常引入图片路径
2024-08-24 21:09:56
在Vue项目中通过data设置图片路径,然后在template中引入后页面无法显示图片,浏览器控制台报错:
刚开始以为是路径出问题了,于是绝对路径、相对路径各种办法试了一遍,发现还是报错,后来才发现这是因为在Vue里动态生成的路径无法被url-loader解析到,此时有两种解决方法:
方法一.直接将你的图片源文件放在项目目录的static文件夹里,然后和正常写图片路径那样写就可以了:
方法二.通过import的方法将图片源路径引入,如下图所示:
需要注意的是:在Vue里图片是通过v-bind绑定src属性的,所以template模板上的img标签并不是src="",而是v-bind:src=""或简写为:src="",如果这里写错了,那无论如何都无法正常引入图片。
方法三.采用背景图做法,通过data将图片源路径引入,利用内联样式。如下代码所示:
<div :style="imgStyle"></div>
data () {
imgStyle: {
backgroundImage:`url(${require('@/assets/images/xxx.png')})`
}
}
如此也可将图片正常引入项目中并作为背景图使用。
最新文章
- css兼容性的问题
- Tomcat的安装(一)
- hibernate--关联映射(一对多)
- C# delegate 学习 (练这么久终于悟出来点东东了,继续加油! ^_^)
- SQL Server 2012 连接到数据库引擎
- LeetCode Lowest Common Ancestor of a Binary Search Tree (LCA最近公共祖先)
- [repost]Xcode因为证书问题经常报的那些错
- 求链表倒数第n个元素
- Springboot @Transactional Mysql事务 无效
- mysql高可用研究(一) 主从+MHA架构 (转)
- 生成器(generator,yield),next,send
- Imbalanced Array CodeForces - 817D (思维+单调栈)
- css 清除浮动的几种方式
- python os模块 遍历目录
- oracle11g忘记sys密码
- TMOD
- [PHP]require include
- 奇妙的音乐-----WriteUp
- FZU2128_最长子串
- “全栈2019”Java第九章:解释第一个程序
热门文章
- poj 2083 Fractal 递归 图形打印
- POJ 2002 Squares 数学 + 必须hash
- joda日期格式转换
- sql语句添加一列标示,然后进行分页。
- 解决ASP.NET Core通过docker-compose up启动应用无法配置https的解决办法
- fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer
- GCC的函数声明问题
- Android 7.0 因为file://引起的FileUriExposedException异常
- 【PostgreSQL-9.6.3】一般视图
- ArrayList集合的特点和几种遍历方法