Vue.js 如何在Vue Js中加载静态图像

我有一个组件，它接受一个作为url的prop字符串。它可以是远程图片，也可以是资产文件夹中的本地静态资产

目录结构：

-assets/
     - logo.png
-app.vue
-components/
    -ImageTest.vue

ImageTest.vue

  <template>
    <div>

        {{imagelink}}
        <div style="width: 150px; height: 150px; background-color: red">
            <img :src="imglink" alt="" height="150px" width="150px">
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImageTest",
        props:{
            imagelink: String,
        },
        computed: {
            // a computed getter
            imglink: function () {
              console.log(this.imagelink)
                return (this.imagelink)
            }
        }
    }
</script>

<style scoped>

</style>

{{imagelink}}
导出默认值{
名称：“图像测试”，
道具：{
imagelink:String，
},
计算：{
//计算吸气剂
imglink:函数（）{
console.log（this.imagelink）
返回（this.imagelink）
}
}
}

App.vue

<template>
    <div id="app">
        <ImageTest imagelink="./assets/logo.png" ></ImageTest>
        <ImageTest imagelink="https://static.raymondcamden.com/images/banners/gate.jpg" ></ImageTest>

    </div>
</template>

<script>
    import ImageTest from './components/ImageTest.vue'

    export default {
        name: 'app',
        components: {
            ImageTest
        }
    }
</script>

<style>
</style>

从“./components/ImageTest.vue”导入ImageTest
导出默认值{
名称：“应用程序”，
组成部分：{
图像测试
}
}

输出：（静态文件不工作，但我可以从developer inspector工具中看到url已加载到src中）

---

由于图像链接实际上是在

ImageTest.vue

中使用的，因此您可能需要删除这些点

这个

变成

<ImageTest imagelink="/assets/logo.png" ></ImageTest>

渲染中出错：“错误：找不到模块“../assets/logo.png”。请尝试不使用点，

/assets/logo.png

。在dat之后我再也猜不到了。什么都不管用。在浏览器中，已加载的所有图片显示为，/img+filename+hash.jpg或.png。例如，不是assets/filename.png。这有什么线索吗？你试过使用

@/assets/logo.png吗？我已经试过了。在浏览器中，已加载的所有图片显示为，/img+filename+hash.jpg或.png。不是assets/filename.png，例如localhost:8080/img/logo.64c8535c.png。这有什么线索吗？——很抱歉，链接应该是
imagelink=“require（'@/assets/logo.png'）”
您是否尝试过
imagelink=“../assets/logo.png”
？@Derek我尝试过，但现在控制台出现错误。渲染中出错：“错误：在src/components/ImageTest.vue的-->中找不到模块“@/assets/logo.png”
<ImageTest imagelink="/assets/logo.png" ></ImageTest>