如何在 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>