Question

我想在Vue 3应用程序的页面上显示一堆实体。每个实体都应有一个图片网址。如果实体没有这样的网址，我想显示存储在/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

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>

尝试这种方法对您而言有效！并告诉我您是否遇到任何错误

Vue退回资产图片

2 个答案: