Vue 3 function that returns src

Question

I have this vue function. That should return the img srs, dynamically. For some reasons, it is not reading the string as a local file. Image is not showing.

script 

 showSuccessPercentage(recieved) {
      if (typeof recieved === "object" && recieved != null) {

        if(recieved["successRunsPercentage"] > 50) {
          return "'../assets/img/rainy.png'"
        }
              } 
      else return "N/A";
      
    },

HTML

<img class= "w-10" :src="showSuccessPercentage(currentView.worstReport) " alt="Organization Icon" />

looks simple. Not sure why it's giving me a hard time.

Riyaz Khan · Accepted Answer · 2021-04-21 06:18:20Z

1

You need to use require method to get the local image render in Vue.app.

showSuccessPercentage(recieved) {
    if (typeof recieved === "object" && recieved != null) {

      if (recieved["successRunsPercentage"] > 50) {
        return require('../assets/img/rainy.png')
      }
    } 
    else return "N/A";
  },

answered Apr 21, 2021 at 6:18

Riyaz Khan

3,3643 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MEAG Over a year ago

I tried, but no. It's not working. Any other guide?

MEAG Over a year ago

Sorry for that. Yes it worked with required. Not sure why it didn't the first time....Really thank you !

Collectives™ on Stack Overflow

Vue 3 function that returns src

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related