Javascript 如何在Vuejs中使用img源绑定？ 演出 导出默认值{ 数据（）{ 返回{ 演出：[ { 项目：“Spotify”， url:“https://www.spotify.com/us/", img:“spotify.png” }, { 项目：“可汗学院”， url:“https://www.khanacademy.org/profile/kaid_385372636982405710465563/courses", img:“khan.png” }, { 项目：“城市国际公司”， url:“http://www.cityinternationalco.com/", img:“hvac.png” }, ], } } }

在这段代码中，我使用了

：src=“”./assets/'+gig.img“

，它应该会在屏幕上显示我的图像。此外，当我检查元素时，我看到了正确的src地址，但不知何故，img没有显示在屏幕上。它只显示图像的绿色边框，按代码中的样式圆角，但仍然不显示实际图像。我真的不知道我能在这里做什么。任何帮助都将不胜感激。谢谢

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

<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=“”./assets/gig.img””，或者如果这是一个常量地址，那么src=“./assets/gig.img”@Anatoly-

gig.img

是基于

data

属性的文件名。如果你在它周围加引号，它就会变成一个字符串。我的坏朋友在v-for中没有注意到它！你收到任何警告了吗？

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