javascript - 如何在 Vuejs 中使用 img 源绑定？

Question

<template>
    <div class="text-center">
        <h1 class="display-4 my-5"><mark>GIGS</mark></h1>
        <b-container fluid="lg">
            <b-row class="mx-auto">
                <b-col lg="4" class="my-4" v-for='gig in gigs' :key='gig'>
                    <a :href="gig.url" target="_blank"><img :src="'./assets/' + gig.img" width="250" height="250" class="border border-success rounded-circle"/></a>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            gigs: [
                {
                    project: "Spotify",
                    url: "https://www.spotify.com/us/",
                    img: "spotify.png"
                },
                {
                    project: "Khan Academy",
                    url: "https://www.khanacademy.org/profile/kaid_385372636982405710465563/courses",
                    img: "khan.png"
                },
                {
                    project: "City International Co.",
                    url: "http://www.cityinternationalco.com/",
                    img: "hvac.png"
                },
            ],
        }
    }
}
</script>

在此代码中，我使用:src="'./assets/' + gig.img"了应该在屏幕上显示我的图像的代码。此外，当我检查元素时，我看到了正确的 src 地址，但不知何故 img 没有显示在屏幕上。它只显示图像的绿色边框，按照代码中的样式四舍五入，但仍不显示实际图像。我真的不知道我能在这里做什么。任何帮助，将不胜感激。谢谢

标签： javascriptvue.jsbootstrap-4frontendbootstrap-vue

Answer 1

您需要使用 require 从 assets 文件夹中获取图像：

<img :src="require('./assets/' + gig.img)" width="250" height="250" class="border border-success rounded-circle"/>