为了账号安全,请及时绑定邮箱和手机立即绑定

img的src如何绑定v-for循环的变量值?

img的src如何绑定v-for循环的变量值?

喵喵时光机 2019-03-15 18:15:08
1.现有一v-for循环,输出每个对象comment,comment用element卡片组件分别输出其各个属性值2.comment有一属性comsimghead存放图片名称,首先用v-if判断是否为空,若为空,img src="../images/head/head.jpg",这个没有问题,但是不为空怎么让src为"../images/head/"+comsimghead呢?(实现全部转换太麻烦,并且转换为后src=后面也不能写变量值啊,还得在data声明变量)3.代码如下:            <el-col :span="12" v-for="comment in currentcomments" :key="comment.comid" :offset="1" style="margin-bottom:40px">                    <el-card :body-style="{ padding: '0px', height:'200px'}" style="width: 800px;height: 200px;">                        <div style="padding: 6px;height: 180px;">                            <div style="height:50px;"><!--头像与用户名-->                                <div style="float: left;width: 50px;height: 50px;" v-if="comment.comsimghead ==null || comment.comsimghead ==''">                                    <img src="../images/head/head.jpg" style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />                                </div>                                <div style="float: left;width: 50px;height: 50px;" v-else><!--这里的src怎么设置?-->                                    <img src="../images/head/" style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />                                </div>                                <div style="float: left;position:relative;top:20px;width:300px;height: 30px;"><font size="5">&nbsp;{{comment.comsname}}</font></div>                            </div>                        </div>                    </el-card>                </el-col>
查看完整描述

3 回答

?
慕无忌1623718

TA贡献1744条经验 获得超4个赞

不需要使用v-if,v-else


<div style="float: left;width: 50px;height: 50px;">

     <img :src='comment.comsimghead?"../images/head/head.jpg":("../images/head/"+comsimghead)' style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />

</div>


查看完整回答
反对 回复 2019-03-27
?
蝴蝶不菲

TA贡献1810条经验 获得超4个赞

<img :src="'../images/head/'+comment.comsimghead" style="height: 40px;width: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;" />

查看完整回答
反对 回复 2019-03-27
  • 3 回答
  • 0 关注
  • 1660 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号