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

Question

在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"
    }    
},

不同的文字颜色不同是可以实现的，为什么不同的图片不行呢？ 页面报错

这是为什么呢 怎么写呢？

根据不同的文字渲染不同的图片

Answer 1

你要记住assets文件夹在你代码跑起来的时候是不存在的，所以不要在vue的逻辑的路径里出现assets，有两种方式：

1. 这些图片放在static里，路径写/static/xxx
2. 使用import img1 from '../assets/xx'导入图片，然后路径里写this.xxx = img1或者:src="img1"

---

除了文件路径错误还有其他错误。

1. statusimage：多个v-for的dom公用了一个statusimage，会导致渲染结果相同。可以将this.statusimage = xxx改为col.statusimage = xxx，或者再起一个数组。
2. 直接把color方法改个名叫getImgPath，绑定到src后面:src="getImgPath(col)"，方法内直接返回路径地址，这么写的话就不需要按1去改了，然后把style里的删了。

Answer 2

有个死循环。
你的

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

可以只写

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

或者只写

return "../assets/image5.png"

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

return this.statusimage

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

Answer 3

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

Answer 4

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

Answer 5

这个最后怎么解决的？遇到同样的问题，求答案。
我是直接用方法的，但是浏览器报找不到图片
<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'
        },