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

在vue中怎么才能根据后台返回不同的文字渲染不同的图片呢?

在vue中怎么才能根据后台返回不同的文字渲染不同的图片呢?

杨魅力 2019-03-11 11:14:04
在vue中怎么才能根据后台返回不同的文字渲染不同的图片呢?根据不同的文字状态,页面上给出不同的图片我是这样写的<li class="clearfix" v-for="(item,key) in myData">    <router-link :to="{path:'/home_details?id='+item.id+'&logDate='+item.status}">        <div>{{item.name}}</div>        <div class="list_right">            <img :src="statusimage"/>            <span v-bind:style="{'color':color(item)}">{{item.status}}</span>        </div>    </router-link></li>color(col){//    if(col.status=="已完成") return "#FFD700"//  if(col.status=="执行中") return "green"//  if(col.status=="待执行") return "gray"//  return "black"    if(col.status=="已完成"){        return this.statusimage="../assets/img6.png"    }    if(col.status=="执行中"){        return this.statusimage="../assets/image7.png"    }    if(col.status=="待执行"){        return this.statusimage="../assets/image5.png"    }    },不同的文字颜色不同是可以实现的,为什么不同的图片不行呢? 页面报错这是为什么呢 怎么写呢?根据不同的文字渲染不同的图片
查看完整描述

5 回答

?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

有个死循环。
你的

return this.statusimage="../assets/image5.png";

可以只写

this.statusimage="../assets/image5.png"

或者只写

return "../assets/image5.png"

建议颜色和图片分开写,
你里面的

return this.statusimage

中间 this 绑定的对象不明确,有可能就是这里进入了循环。
剩下如果还不行,就要看到底哪里进入死循环了,要看代码逻辑,你这里给出的不够。


查看完整回答
反对 回复 2019-04-04
?
慕侠2389804

TA贡献1719条经验 获得超6个赞

vue的数据绑定,this.statusimage重新赋值之后就会更改,不需要再用return了 感觉是这个问题 你再看看


查看完整回答
反对 回复 2019-04-04
?
狐的传说

TA贡献1804条经验 获得超3个赞

有可能是图片路径的原因,所以建议可以用class直接改,把图片写成背景图


查看完整回答
反对 回复 2019-04-04
?
斯蒂芬大帝

TA贡献1827条经验 获得超8个赞

这个最后怎么解决的?遇到同样的问题,求答案。

我是直接用方法的,但是浏览器报找不到图片

<img v-bind:src="srcValue(item.ExecStatus)"/>

srcValue: function (status) {


            if(status==2)

                return '/Image/OK.png'

            if(status==3)

                return '/Image/Error.png'

            if(status==1)

                return '/Image/waiting.png'

            else

                return '/Image/waiting.png'

        },     


查看完整回答
反对 回复 2019-04-04
  • 5 回答
  • 0 关注
  • 3447 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信