Как я могу предотвратить временную загрузку изображения-заполнителя в этом приложении Vue 3?

Что-то вроде следующего должно помочь, добавлены строки, отмеченные **********

<template>
  <div class = "poster-container text-center text-sm-start my-3">
    <!-- ************ -->
    <img v-if = "loaded"
      :src = "genericPoster"
      :alt = "movie?.title"
      class = "img-fluid shadow-sm"
    />
  </div>
</template>

<script lang = "ts">
import { defineComponent } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import env from "../env";
import { Movie } from "../models/Movie";

export default defineComponent({
  name: "MovieDetails",

  data() {
    return {
      //************************
      loaded: false, 
      route: useRoute(),
      genericPosterBig: require("../assets/generic-poster-big.png"),
      movie: null as Movie | null
    };
  },

  mounted() {
    this.getMovieDetails();
  },

  methods: {
    getMovieDetails() {
      axios
        .get(
          `${env.api_url}/movie/${this.route.params.id}?api_key=${env.api_key}`
        )
        .then((response) => {
          this.movie = response.data;
        })
        .catch((err) => console.info(err))
        //****************
        .finally(() => this.loaded = true); 
    },

  computed: {
    genericPoster() {
      return !this.movie?.poster_path
        ? this.genericPosterBig
        : `https://image.tmdb.org/t/p/w500/${this.movie?.poster_path}`;
    },
  }
});
</script>

Такое поведение ожидается с учетом вашего решения, но я понимаю, что вы хотите улучшить его по причинам UX.

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

Я вижу два решения для этого:

1. Устанавливайте замещающее изображение только в том случае, если основное изображение не загружается (т. е. если URL-адрес неверный или пустой). Таким образом, ваш заполнитель будет загружаться только после попытки загрузить основное изображение, а не раньше.

Пока он загружается, используйте счетчик загрузки на вашем изображении во время его загрузки, а не заполнитель изображения (который должен появиться только после того, как будут получены детали постера). Это полезно, чтобы избежать мерцания макета: он резервирует пространство, необходимое для изображения.

<template>
  <div class = "poster-container text-center text-sm-start my-3">
    <div v-if = "loading">Loading spinner...</div>
    <img
      v-else
      :src = "movie.poster_path"
      :alt = "movie.title"
      class = "img-fluid shadow-sm"
      @error = "setPlaceholder"
    />
  </div>
</template>

<script>
{
  data() {
    return {
       movie: null,
       loading: true,
       genericPosterBig: null,
    }
  }
  mounted() {
    this.getMovieDetails()
  },
  methods: {
    getMovieDetails() {
      this.loading = true
      axios.get(`${env.api_url}/movie/${this.route.params.id}?api_key=${env.api_key}`)
        .then(({ data }) => {
          this.movie = data;
        })
        .catch((err) => console.info(err))
        .finally(() => {
          this.loading = false
        });
    },
    setPlaceholder(event) {
       // This loads the image only if it's not already assigned
       this.genericPosterBig ||= require("../assets/generic-poster-big.png")
       event.target.src = this.genericPosterBig
    }
  }
}
</script>

2. Используя инфраструктуру Nuxt, вы можете предварительно загрузить сведения о фильмах перед монтированием страницы сведений о фильме, используя компонуемый useAsyncData() (или для option API), поэтому вы уверены, что у вас уже есть все данные о фильмах при создании страница сведений (поэтому не мерцает).

{
  // This will block the page rendering until the promise is settled.
  async asyncData() {
     const movieDetails = await axios
        .get(`${env.api_url}/movie/${this.route.params.id}?api_key=${env.api_key}`)
        .then((response) => response.data)
     return { movieDetails }
  }
}