首页 > 代码库 > vue组件属性中字符串如何拼接变量?
vue组件属性中字符串如何拼接变量?
不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明。经过百度之后终于知道了什么情况。
首先:
这样是没问题的:
<img src="./../assets/avatar.png" />
但是我把地址提取出来,当道 data 里之后就不行了。
<img :src="http://www.mamicode.com/logoSrc" > export default { data () { return { logoSrc: ‘./../assets/avatar.png‘ } } }
原因是如果你把相对地址写在模版里,就是第一种,用webpack打包的时候,会解析地址并打包引用图片。
而在
如果想这么做 你可以把图片放在最外层的
还有一种方法就是通过
而在
js
里写图片路径其实只是字符串 webpack
不会处理如果想这么做 你可以把图片放在最外层的
static
文件夹里,当然我不推荐这种做法。还有一种方法就是通过
import
require
引入图片。比如:http://blog.csdn.net/fairyier/article/details/70847057
还有一种情况。后端传递过来的图片是不需要 require 的。如果要显示,直接在 img 的 src 设置后端返回的地址即可。
用哪种方法就看实际情况吧,图片少的话用require是蛮不错的,如果多的话,是不是会很麻烦呢。vue组件属性中字符串如何拼接变量?
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。