无法使用img绑定vue加载图像

【问题标题】：cant load image with img bind vue无法使用img绑定vue加载图像
【发布时间】：2021-08-08 15:43:43
【问题描述】：

谁能帮帮我，为什么我的图片无法加载？

<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>

这是我的目录

【问题讨论】：

不正确的路径../assets/image/yourimage，通常您希望为根目录创建一个别名，这样您就不必为目录执行上下代码。 stackoverflow.com/questions/55309945/…

标签： image vue.js bind

【解决方案1】：

<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>

您的图片路径可以添加到 movie.poster 所以你的 movie.poster 将包含值 '../src/assets/image/kimi-no-na-wa-poster.jpg'

你也可以通过以下方式添加图片标签

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

在这种情况下，您的变量 movie.poster 将仅包含图像的名称 kimi-no-na-wa-poster.jpg

【讨论】：