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

Question

我有一个组件，它接受一个作为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>

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>

输出：（静态文件不起作用，但是我可以从开发人员检查器工具中看到url已加载到src中）

Answer 1

由于图像链接实际上是在ImageTest.vue中使用的，因此您可能需要删除圆点。

此

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

成为

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