Vue 回退到资产图像答案

【问题标题】：Vue fallback to asset imagesVue 回退到资产图像
【发布时间】：2019-04-20 21:01:54
【问题描述】：

我想在 Vue 3 应用程序的页面上显示一堆实体。每个实体都应该有一个图像 URL。如果实体没有这样的 URL，我想显示存储在 /src/assets/images/default.png 中的默认图像

所以我创建了一个返回图像 URL 的计算属性，entity.url 或上面的 URL。

不幸的是，这不起作用，我没有得到默认图像，而是没有图像，并且 Vue 开发网络服务器返回 index.html。这是因为在运行时返回静态资源 URL 时，Vue 对静态资源的处理不起作用。

如果我硬编码 URL @/assets/images/default.png，图像会正确显示，但如果我将其作为字符串返回（删除@ 没有区别）。

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

【问题讨论】：

所以我猜你有一个v-for="something in somethings" 并在循环中调用图像。你能在图像周围加上一个带有 v-if 的包装标签，比如<template v-if="entity.url"><img :src="entity.url"/></template><template v-else><img... 等吗？

标签： vue.js

【解决方案1】：

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>

试试这应该适用于你的情况！如果您遇到任何错误，请告诉我

【讨论】：

这几乎就是我正在做的事情，但它不起作用。静态 URL 未得到解析。
其实我试过这种方法，效果很好，很奇怪。
return require("@/assets/images/default.png"); 为我工作

【解决方案2】：

我会使用v-if/v-else 根据entity.url 是否存在来显示适当的图像..

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

【讨论】：