如何在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不在屏幕上显示。它仅显示图像的绿色边框，按照代码中的样式四舍五入，但仍不显示实际图像。我真的不知道该怎么办。任何帮助，将不胜感激。谢谢

Answer 1

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