vue组件属性中字符串如何拼接变量?
2017-05-01 14:39
423 查看
不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明。经过百度之后终于知道了什么情况。
首先:
这样是没问题的:
但是我把地址提取出来,当道 data 里之后就不行了。
这样会报404错误。
原因是如果你把相对地址写在模版里,就是第一种,用webpack打包的时候,会解析地址并打包引用图片。
而在
如果想这么做 你可以把图片放在最外层的
还有一种方法就是通过
还有一种情况。后端传递过来的图片是不需要 require 的。如果要显示,直接在 img 的 src 设置后端返回的地址即可。
用哪种方法就看实际情况吧,图片少的话用require是蛮不错的,如果多的话,是不是会很麻烦呢。
首先:
这样是没问题的:
<img src="./../assets/avatar.png" />
但是我把地址提取出来,当道 data 里之后就不行了。
<img :src="logoSrc" > export default { data () { return { logoSrc: './../assets/avatar.png' } } }
这样会报404错误。
原因是如果你把相对地址写在模版里,就是第一种,用webpack打包的时候,会解析地址并打包引用图片。
而在
js里写图片路径其实只是字符串
webpack不会处理
如果想这么做 你可以把图片放在最外层的
static文件夹里,当然我不推荐这种做法。
还有一种方法就是通过
import
require引入图片。比如: http://blog.csdn.net/fairyier/article/details/70847057
还有一种情况。后端传递过来的图片是不需要 require 的。如果要显示,直接在 img 的 src 设置后端返回的地址即可。
用哪种方法就看实际情况吧,图片少的话用require是蛮不错的,如果多的话,是不是会很麻烦呢。
相关文章推荐
- vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
- vue中如何实现变量和字符串拼接
- Vue系列: 如何通过组件的属性props设置样式
- vue中变量和字符串拼接
- 如何让JS变量和字符串拼接后,是变量而不是字符串
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- 如何用拼接的字符串调用javascript的变量或方法
- javascript function传递 参数当参数是 字符串 如何拼接(有些参数是通过变量得到的) 如何拼接
- 如何让JS变量和字符串拼接后,是变量而不是字符串
- Vue系列: 如何通过组件的属性props设置样式
- vue.js如何在标签属性中插入变量参数
- js中input的属性设置问题(变量设置,字符串拼接,通过函数设置)
- 如何在自定义数据源组件中为自定义属性提供UIEditor
- GStreamer使用playbin,如何给动态生成的source组件设置属性?
- shell如何设置拼接的变量
- 如何在SSIS的脚本组件中访问变量
- IPhone开发学习笔记:属性变量如何release?
- Flex中如何通过errorString属性在CheckBox控件上设置一个错误信息显示字符串的例子
- 如何不利用其他的变量,去除字符串中空格?