1

can anyone help me, why my image won't load ?

<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
    <div :class="['card-movie', movie.page]" :movie="movie.name">
        <img :src="'../src/assets/image/kimi-no-na-wa-poster.jpg'+movie.poster" class="card-img-top" :alt="movie.name">
    </div>
</div>

This is my dir

enter image description here

Peppermintology
  • 9,343
  • 3
  • 27
  • 51
IkanPakUs
  • 11
  • 2
  • Incorrect path `../assets/image/yourimage`, generally you want to create an alias to the root dir so you don't have to do this up and down code for directories. https://stackoverflow.com/questions/55309945/vue-cli-3-project-alias-src-to-or-not-working – Robert May 19 '21 at 12:05

1 Answers1

0
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
    <div :class="['card-movie', movie.page]" :movie="movie.name">
        <img :src="movie.poster" class="card-img-top" :alt="movie.name">
    </div>
</div>

your path of an image can be added to movie.poster so your movie.poster will contain value '../src/assets/image/kimi-no-na-wa-poster.jpg'

you can add image tag in the following way also

<img :src="'../src/assets/image/'+ ${movie.poster}" class="card-img-top" :alt="movie.name"/>

In this case, your variable movie.poster will container only the name of image kimi-no-na-wa-poster.jpg

Rupesh Terase
  • 440
  • 3
  • 14