正文

vue脚手架中动态引用图片的办法

IP云
IP云V管理员/7 阅读
08/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

需要先导入：

import logo_st_ga from '../assets/big_st_ga.png';
import logo_st_sp from '../assets/big_st_sp.png';

然后根据后端传递过来的标识符引入对应的图片：

if(res.data.data == 'st_ga'){
thiz.logoName = logo_st_ga;
}else if(res.data.data == 'st_sp'){
thiz.logoName = logo_st_sp;
}

在data中定义变量， logoName,  选择对应的图片赋值给logoName, 即可

<div class="logo-box">
<img class="logo" img v-bind:src="logoName">
</div>

补充：

发现一种更简单的，

<img style="margin-left: 20px;" :src='"../../assets/head_"+v+".png"'>这边v定义在data中，然后可以根据图片命名约定，用:src动态引用