Vue - 如果 src 为空，如何放置图标

Question

我有一个 Vue 项目，其中包含要在我的仪表板上显示的 Card 组件。我有 4 张不同的卡片，我使用来自不同组件的道具发送它们的数据。这是我的 Card 组件设计；

<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>

如你所见，有一堆道具。这是我使用它们的地方。

    <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= ""
        />

所以这是我的问题。在这个卡片设计中，我想在 infoLogoURL 部分显示一个品牌的标志。我在这里留空但是当我在那里放一些 link 时，它完美地显示了徽标。顺便说一句，我还有另外三个这种卡片设计，我用 Material Icon 图标给他们，但是这个有点特别，所以我需要使用一些标志作为 .png 或 .svg 格式。

假设在那个特定时刻，品牌标志的 link 不可用，我的项目无法访问 .SVG 文件。我想要做的是在那一刻显示一个 Material Icon 图标。所以基本上如果 infoLogoURL 道具中有一个 link，我想显示那个 link，标志。但是如果那个道具没有 link，我想激活一个不同的道具并显示一个图标而不是损坏的图像。我该怎么做？

Answer 1

使用conditional rendering（v-if和v-else）测试图像是否存在并采取相应行动：

<img v-if="infoLogoURL" :src="infoLogoURL" class="logo" alt="" />
<md-icon v-else>{{ infoSubIcon }}</md-icon>

如果定义了infoLogoURL，则显示<img>，否则显示<md-icon>。

Answer 2

你可以使用 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>

Vue - 如果 src 为空，如何放置图标

Vue - How to put Icon if src is emtpy

prop

vue.js