问题描述:

写的一个系统,用户登录后会使用数据库的数据作为用户头像,需要显示在页面上,那头像链接就需要用变量表示,那就用到了: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就可以动态获取了

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐