Проблема загрузки изображения с 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"
  />

Вы можете увидеть более подробную информацию об этом компоненте здесь

У меня была точно такая же проблема. И ни один из предыдущих ответов не решил мою проблему.

В методе, который изменяет сведения о ваших элементах и ​​ссылку на изображения (например: changeDetails ()), сделайте резервную копию вашего реального пути к изображению (impath) в (impath_b) и установите для пути к изображению значение 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 покажите изображение только тогда, когда оно не равно нулю:

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

Определите transpGif в вашей области переменных:

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

подробнее об этом transpGif здесь.

Идея состоит в том, чтобы очистить и перерисовать изображения с пустым изображением, а затем новое изображение будет нарисовано при загрузке.