在vue项目中，通常需要通过v-for 渲染多个img元素，当我们想给每个img元素添加他们各自的src时，需要用到vue  src动态绑定

 

例如下面，

 

<img :src="typeIcon(tt.questionType)" alt="加载失败">

这里的tt 就是渲染的内容，每个img的src需要根据tt的questionType去判断

我们首先为这个判断设置一个函数，并把它绑定到img .

typeIcon:function(kind){
           switch (kind){
            case 1 : return  require("../../assets/images/single_choice.png" )
            break;
            case 2 : return  require( "../../assets/images/multi_choice.png" )     
            break;
            case 3 : return   require( "../../assets/images/matrix_single.png" )                
            break;
            case 4 : return    require( "../../assets/images/matrix_multi.png")  
            break;
            case 5 :return    require("../../assets/images/blank.png" )
            break;
            default: return      require( "../../assets/images/shortAnswer.png" )
        }
    },

这里我们用一个switch 语句，判断每个img对应的src 。

这里需要注意的是：

返回src时，需要在src字符串前面加上require 

最后，用 :src 绑定typeIcon

<img :src="typeIcon(tt.questionType)" alt="加载失败">
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue