如何在vue js中加载静态图像

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

目录结构:

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

图像测试.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>

应用程序.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>

输出:(静态文件不起作用,但是我可以从开发人员检查器工具中看到url被加载到src中)