Vue.js中的图片引用路径
来源:互联网 发布:淘宝买零食吃靠谱吗 编辑:程序博客网 时间:2024/06/06 03:15
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形:
使用一
我们在data里面定义好图片路径
- 1
- 2
然后,在template模板里面
- 1
- 2
这样是错误的写法,我们应该用v-bind绑定图片的srcs属性
- 1
或者
- 1
这种方式是按照正常HTML语法引用路径,放在模板里可以被webpack打包出来。
使用二
当我们需要在js代码里面写图片路径的时候,如果我们在data里面写
- 1
- 2
此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:
- 1
- 1
在data里面定义
- 1
情形三
我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:
- 1
- 1
以上就是我们在Vue.js中引用图片路径的方式。
阅读全文
0 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引入背景图路径不对,解决方案
- 2 springboot项目集成使用disconf,基于docker环境
- 机器学习中的各种距离
- Java技术学习路线思路
- H265(HEVC)视频下载 测试专用
- BZOJ 3170 [Tjoi 2013]松鼠聚会 切比雪夫距离-->曼哈顿距离
- Vue.js中的图片引用路径
- ImageView支持Exif
- leetcode Search a 2D Matrix II
- 使用heat创建虚拟机
- Qt--03:信号与槽
- jquery的ajax和getJson跨域获取json数据的实现方法
- Burp Suite is one of the best tools available for web application testing. Its wide variety of featu
- Jenkins插件下载失败两种处理办法
- vue滚动自动加载