Vue.js中的图片引用路径
来源:互联网 发布:广州乐乎城市青年社区 编辑:程序博客网 时间:2024/06/06 00:18
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:
使用一
我们在data里面定义好图片路径
/*错误写法*/imgUrl:'../assets/logo.png'
然后,在template模板里面
/*错误写法*/<img src="{{imgUrl}}">
这样是错误的写法,我们应该用v-bind绑定图片的srcs属性
<img :src="imgUrl">
或者
<img src="../assets/logo.png">
这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。
使用二
当我们需要在js代码里面写图片路径的时候,如果我们在data里面写
/*错误写法*/imgUrl:'../assets/logo.png'
此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:
<img :src="avatar" />
import avatar from '@/assets/logo.png'
在data里面定义
avatar: avatar
情形三
我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:
imgUrl : '../../static/logo.png'
<img :src="imgUrl" />
以上就是我们在Vue.js中引用图片路径的方式。
阅读全文
1 0
- Vue.js中的图片引用路径
- Vue.js中的图片引用路径
- Vue.js中的图片引用路径的方式
- Vue.js 图片不显示 | 图片资引用 | img src 路径出错
- css和js引用图片路径
- 母板页中的引用的图片、JS、css的路径等问题
- CSS、JS中的相对路径引用
- CSS、JS中的相对路径引用
- CSS、JS中的相对路径引用
- CSS、JS中的相对路径引用
- CSS、JS中的相对路径引用
- CSS与JS中的相对路径引用
- CSS、JS中的相对路径引用
- vue.js 部署中碰到的图片路径问题
- vue路径中的#号
- JSP页面中JS,图片等相对路径引用问题
- css和js引用图片的路径问题
- vue.js vue组件中style样式中的css引入背景图路径不对,解决方案
- 欧拉函数phi的应用(洛谷2158 [SDOI2008]仪仗队)
- 数学方法(GCD XOR Uva12716)
- 字符串转换成整数+不用加减乘除做加法
- 组合数杨辉三角(Irrelevant Elements uva1635)
- 堆or优先队列(洛谷1631 序列合并)
- Vue.js中的图片引用路径
- 简单的分治模板
- 归并方法求逆序对(洛谷1908逆序对)
- 多叉树转二叉树+树形dp(codevs 1746 贪吃的九头龙 2002noi)
- Unity引擎学习
- 离散化的基本操作
- 关于循环输出后怎么控制隐藏显示
- 最小点对分治法(洛谷1257)
- 简陋的dp(蒟蒻dhl的日常)