对于依赖于从 API 调用获得的变量的计算属性，如何避免 404 错误？

Question

我想显示一个图像，其来源是计算的属性，它依赖于 API 调用。它有效，但我在控制台中收到一条我不想看到的 404 错误消息。

这是我的图片：

<img :src="userPhotoUrl" />

这里是计算的属性及其依赖的东西：

computed: {
  ...mapState({
    user: state => state.dashboard.user || {},
    storageBaseUrl: state => state.storageBaseUrl || ''
  }),
  userPhotoUrl() {
    try {
      return `${this.storageBaseUrl}${this.user.photo}`
    } catch (error) {
      return ""
    }
  }

知道如何避免 404 吗？

Answer 1

考虑到如果没有有效的 url，您的图片就没有意义，如果没有有效的 url

，我不会收录它

<img v-if="baseurl" :src="url" />

const store = new Vuex.Store({
  state: {baseurl:false}
})
Vue.use(Vuex)

var vm = new Vue({
  el:'#app',
  store,
  computed: {
    baseurl () { return this.$store.state.baseurl},
    url () { return this.baseurl + '/hn-images/1*Pki08Q31XRtQA8zLl2Gn1w.png'}
  },
  template: '<p><img :src="url" v-if="baseurl"/></p>'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js"></script>
<button onclick="vm.$store.state.baseurl='https://hackernoon.com'">load baseurl</button>
<div id="app"></div>

对于依赖于从 API 调用获得的变量的计算属性，如何避免 404 错误？

How to avoid 404 error for a computed property which relies on a variable obtained from API call?

vue.js

computed-properties

对于依赖于从 API 调用获得的变量的计算 属性，如何避免 404 错误？

How to avoid 404 error for a computed property which relies on a variable obtained from API call?

vue.js

computed-properties

对于依赖于从 API 调用获得的变量的计算属性，如何避免 404 错误？