vue的图像加载问题

Question

这个问题可能不是vue特有的，但如下。。。

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

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

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

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

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

Answer 1

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

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

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

Answer 2

我通过使用vue:的渐进式图像渲染解决了这个问题

首先，我安装了一个包，通过npm i v-lazy-image为我提供了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"
/>

你可以在这里看到这个组件的更多细节

Answer 3

我遇到了完全相同的问题。之前的答案都没有解决我的问题。

在更改项目详细信息和图像链接的方法(例如：changeDetails(((中，在(impath_b(处备份真实图像路径(impath(，并将图像路径设置为null。Vue.js将绘制一个透明图像，100ms后恢复真实图像路径(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代码显示图像时，它不是空的：

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

在变量区域定义transpGif：

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

关于这个transpGif的更多细节请点击这里。

这个想法是用一个空图像来清理和重新绘制图像，然后在加载新图像时绘制新图像。