Vue的图像加载问题

破坏缓存的一个常见技巧是向URL添加一个无害的更改参数,例如时间戳:

<img :src="'https://external-site.com/photos/' + item.name + '.jpg?x=' + Date.now()" />

参数 不应该 干扰访问图像,但浏览器不会假定URL相同。

我通过使用Vue进行图像渲染解决了这个问题:

首先我安装了一个包,它给了我一个 v-lazy-image 组件通过 npm i v-lazy-image 然后我导入了组件

<script>
import VLazyImage from "v-lazy-image";

export default {
  components: {
    VLazyImage
  }
};
</script>

然后,该组件允许您指定要在加载图像时使用的图像和占位符图像:

<v-lazy-image
  :src="'https://external-site.com/photos/' + item.name + '.jpg'"
  src-placeholder="/images/default.jpg"
  />

您可以看到此组件的更多详细信息 here