Vue 回退到资产图像

Question

我想在 Vue 3 应用程序的页面上显示一堆实体。每个实体都应该有一个图像 URL。如果实体没有这样的 URL，我想显示存储在

/src/assets/images/default.png

中的默认图像

因此，我创建了一个返回图像 URL 的计算属性，可以是

entity.url

或上面的 URL。

不幸的是，这不起作用，我没有得到默认图像，而是没有图像，并且 Vue 开发网络服务器返回

index.html

。这是因为当运行时返回静态资源 URL 时，Vue 对静态资源的处理不起作用。

如果我对 URL

@/assets/images/default.png

进行硬编码，则图像会正确显示，但如果我将其作为字符串返回，则图像不会正确显示（删除

@

没有区别）。

如何让 Vue 处理动态引用的静态资源？

Answer 1

我会使用

v-if

/

v-else

根据

entity.url

是否存在来显示适当的图像..

<img v-if="entity.url" :src="entity.url" />
<img v-else src="@/assets/images/default.png" />

Answer 2

在 Vue 3 中，您可以在图像上放置

@error

事件，因此如果 URL 返回 404，您可以执行任意逻辑：

<script setup>
import { ref } from 'vue';

const isProfileImageBroken = ref(false);

const handleBrokenImage = () => {
    console.log('image broke');
    isProfileImageBroken.value = true;
};
</script>

<template>
    <i v-if="!auth.user.image || isProfileImageBroken" class="icon-user icon-lg"></i>
    <img
        v-if="auth.user.image && !isProfileImageBroken"
        :src="auth.user.image"
        class="w-6 h-6 rounded-full object-cover"
        @error="handleBrokenImage"
    >
</template>

Answer 3

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    imageData:{ imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png',
    
    }
  },
  methods: {
  	getUrlData(data) {
    	if (data && data.imgUrl) {
      	return data.imgUrl
      }
      else {
      	return "@/assets/images/default.png"
      }
    }
  }
})

<div id="app">
  <p>{{ message }}</p>
  <img :src="getUrlData(imageData)">
</div>

尝试一下这个应该适合你的情况！如果您遇到任何错误，请告诉我

Answer 4

您必须确保在使用变量引用图像时不使用相对路径。

试试这个：

const defaultImage = new URL(
  '../../assets/images/default.svg',
  import.meta.url
).href

<img src="../../assets/images/broken_img.svg" @error="(e) => {e.target as HTMLImageElement).src = defaultImage}"/>