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

需要先导入:

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动态引用

原文地址:https://www.cnblogs.com/chenmz1995/p/11320514.html