In vue, how can you render different pictures according to different text returned in the background?

how can I render different pictures according to different text returned in the background in vue?

clipboard.png

clipboard.png

clipboard.png

Why is this? how do you write it?

render different pictures according to different text

Javascript
Mar.15,2021

remember that the assets folder does not exist when your code is running, so do not appear assets in the logical path of vue. There are two ways:

  1. these pictures are placed in static, and the path is written / static/xxx .
  2. use import img1 from'. / assets/xx' to import the picture, and then write this.xxx = img1 or : src= "img1" in the path.
< hr >

there are other errors in addition to file path errors.

  1. statusimage : the dom of multiple v-for shares a statusimage , which results in the same rendering result. You can change this.statusimage = xxx to col.statusimage = xxx , or start another array.
  2. directly change the name of the color method to getImgPath, and bind it to the src after : src= "getImgPath (col)" , and return the path address directly in the method, so you don't need to press 1 to change it, and then delete the one in style.

there is an endless cycle.
your 

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

you can just write 

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

or just write 

return "../assets/image5.png"

it is recommended that colors and pictures be written separately.
your inner

return this.statusimage

the object bound by this in the middle is not clear, so it is possible that this is where the loop is entered.
if the rest doesn't work, it depends on where to enter the endless loop. It depends on the code logic. You haven't given enough here.

The data binding of

vue will be changed after the this.statusimage is re-assigned. There is no need to use return anymore. It feels like this problem. Take a look at

may be the reason for the path of the picture, so it is suggested that you can directly change it with class to write the picture as a background image

.

how did you solve this in the end? If you encounter the same question, ask for an answer.
I use the method directly, but the browser report can't find the picture

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'
        },

Previous: In vee-validate, how to cancel the check of a field?

Next: Sudo-s reports an error in the terminal of mac

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b881-2c294.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b881-2c294.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?