VUE中的img的:src动态加载图片的问题,require也不能随便用
问题描述:写的一个系统,用户登录后会使用数据库的数据作为用户头像,需要显示在页面上,那头像链接就需要用变量表示,那就用到了:src做动态绑定,直接加变量问题解决:1、使用require由于我们在写代码用的链接是编译前的,编译后图片文件,require中直接写死是没有错误的(里面全是字符串的话),但是如果只用一个变量,就会报错2、使用require的小技巧查找到了一篇有用的教程——前端es6 req
·
问题描述:
写的一个系统,用户登录后会使用数据库的数据作为用户头像,需要显示在页面上,那头像链接就需要用变量表示,那就用到了:src
做动态绑定,直接加变量
问题解决:
1、使用require
由于我们在写代码用的链接是编译前的,编译后图片文件,require中直接写死是没有错误的(里面全是字符串的话),但是如果只用一个变量,就会报错
2、使用require
的小技巧
查找到了一篇有用的教程——前端es6 require动态引入图片报错Error: Cannot find module
,“因为require它是打包工具所需要的标识,你搞成运行时通过变量去定义的话,它就没办法打包了啊”,那就加个字符串,做个前缀吧
<img :src="imgUrl" class="user-avator" alt />
computed: {
imgUrl: function () {
return this.photo;
}
}
this.photo = require("../../assets/img/"+obj.photo);
obj即为用户信息对象,里面的photo存储用户头像文件名,加上前缀文件夹,用require
就可以动态获取了
更多推荐
已为社区贡献2条内容
所有评论(0)