Question

我有一个用v-if进行迭代的图像数组，对于每个图像，我想通过向后端发送带有当前图像ID的请求来显示实际图像。这将返回该URL，然后将此URL绑定到src标记的img属性。网址返回没有错误，我什至可以通过在浏览器中打开它们来访问它们，但是由于某些原因我的图像无法显示

我的代码如下：

QItem(v-if="images.length" :key="image.id" v-for="(image, index) in images" highlight)
 QItemMain(inset).col                         
  img(:src="getImageResource(image.id)" height="100" width="100" :alt="image.description")

我用以下方法返回网址的方法：

 async getImageResource(id) {
      try {
        const res = await this.$axios.get(
          `/image/${encodeURIComponent(id)}`
        );

        if (res.status === 200) {        
          return res.data;
        }
        return "http://www.exampleimg.com/something.jpg";
      } catch (err) {
        console.log(err);
      }
    }

通过将res.data记录到控制台，我得到了url，并且我认为以这种方式绑定到src属性应该是反应性的，因此，即使图像要在响应返回之前进行渲染，也不应该是问题，但我可能错了。

我该如何做？

Answer 1

计算的属性根据其依赖关系进行缓存。一个计算属性仅在其某些依赖项具有改变了。

https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

也许尝试使其成为计算属性而不是方法。

如何通过获取请求响应在vue.js中设置图像src？

1 个答案: