vue.js - 如何在Vue Js中加载静态图片

Question

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

目录结构:

-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>