VUE——为img元素动态添加src及注意事项

最新推荐文章于 2025-04-09 20:03:43 发布

怎么才这几个粉丝

最新推荐文章于 2025-04-09 20:03:43 发布

阅读量4k

点赞数 2

分类专栏： vue 文章标签： vue img动态绑定

本文链接：https://blog.youkuaiyun.com/guitarist0505/article/details/101680734

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

在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="加载失败">