vue.js - Vue - How to put Icon if src is emtpy

Question

I have a Vue project that has Card components to display on my Dashboard. I have 4 different cards and I send their data with props from a different component. Here is my Card component design;

<div>
  <div>
    <div>
      <h5>{{ infoTitle }}</h5>
      <span :class="[infoResponsiveTextSize]">{{ infoText }}</span>
    </div>
    <div> 
      <div :class="[infoIconColor]">
        <img :src="infoLogoURL" class="logo" alt="" @error="$event.target.src='link/picture.png'"> 
      </div>    
    </div>
  </div>
  <p class="text-sm text-gray-500 mt-4">        
    <span class="mr-2" :class="[ infoSubIconColor ]">
      <i class="card-icons-mini">{{ infoSubIcon }}</i>
      <span>{{ infoSubText }}</span>
    </span>
    <span>{{ infoDescription }}</span>
  </p>
</div>

As you see there are bunch of props. And here is where I use them.

    <cardHeaderInfo 
      infoTitle = "Info Title" 
      infoText = "Info Text" 
      infoSubIcon = "material_icon_name" 
      infoSubIconColor = "Icon Color CSS class" 
      infoSubText = "Info Sub Text" 
      infoDescription = "Info Description" 
      infoIconColor = "Material Icon Background Color CSS Class"
      infoResponsiveTextSize = "Text Size CSS Class"
      infoDescriptionTextSize = "Descripotion CSS Class"
      infoLogoURL= ""
        />

So here is my question. In this card desgin, I want to display a brand's logo in the infoLogoURL part. I left blank in here but when I put some link there, it perfectly displays the logo. By the way I also have three more of this card design, I use Material Icon icons for them but this one is a little special, so I need to use some logo as .png or .svg format.

Let's say at that specific moment, the link of the brand's logo is not available and my project cannot reach the .SVG file. What I want to do is displaying a Material Icon icon in that moment. So basically if there is a link in the infoLogoURL prop, I want to display that link, logo. But if there is no link for that prop, I want to activate a different prop and display an icon instead of a broken image. How do I do that?

question from:https://stackoverflow.com/questions/65829294/vue-how-to-put-icon-if-src-is-emtpy

Answer 1

you can do it using v-if

<div :class="[infoIconColor]">
        <img v-if="infoLogoURL !== ''" :src="infoLogoURL" class="logo" alt="" @error="$event.target.src='link/picture.png'"> 
        // v-else show your material icon
      </div>