Question

这个问题可能不是vue特有的，但是这里...

我正在搜索一些项目并从数据库中检索它们，每个项目都有一个唯一的名称，我用它来从外部站点加载它们的图像，例如：

<img :src="'https://external-site.com/photos/' + item.name + '.jpg'" />

每当我搜索第一个项目时，它都会返回带有图像和详细信息的项目。但是，每当我搜索第二个项目时，它都会返回正确的详细信息，但会使用最后一个项目的缓存图像，直到加载了自己的图像为止。

我决定在开始加载图像之前，先在图像上使用一些事件来显示加载程序，但我只发现有3个特定于图像的事件：onabort，onerror，{{1} }。

但是我需要一个事件来在开始下载图像时显示加载程序。如果没有，还有其他方法可以解决此问题吗？

Answer 1

击败缓存的一个常见技巧是在网址中添加一个无害的，变化的参数，例如时间戳记：

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

参数不应会干扰图像的访问，但是浏览器不会认为该URL是相同的。

Answer 2

我通过在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

的更多详细信息

Answer 3

我有完全一样的问题。以前的答案都没有解决我的问题。

使用更改项目详细信息和图像链接的方法（例如：changeDetails（）），在（impath_b）上备份真实图像路径（impath），并将图像路径设置为null。 Vue.js将绘制透明图像，并在100毫秒后恢复实际图像路径（impath）。

changeDetails() {
    // for ...
    item.impath_b = item.impath; // it's not necessary declare impath_b before.
    item.impath = null;
    // ...

    // just before the method ends:
    setTimeout(function () {
        vm.revertImages();
    }, 100);
},
revertImages() {
    // for ...
    item.impath = item.impath_b;
    item.impath_b = null;
}

在html代码处，仅在图像不为null时显示图像：

<img v-if="item.file!=null" :src="item.file"/>
<img v-else :src="transpGif"/>

在变量区域定义transpGif：

transpGif: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

有关此transpGif here的更多详细信息。

想法是清理并重新绘制带有空白图像的图像，然后在加载新图像时将其绘制。

Vue的图片加载问题

3 个答案: