如何在 Vue 3 的 Composition API 的 Setup 函数中引用图像？

Question

如何在合成 API 的设置功能中引用图像？路径是'../assets/pic.png'

如果我直接在模板内部使用路径，作为 img 标签中的 src，图像将显示在页面上。当我检查它时，它显示图像名称，后跟 id，然后是文件扩展名，例如：“/img/pic.123456.png”。我可以这样做来得到我想要的东西，但这似乎不是在 Vue 中做事的正确方法。

我想应该是这样的：

<template>
    <div>
        <img src="pic">
    </div>
</template>


<script>

import { ref } from 'vue'
export default {

    setup(){

        const pic = ref('../assets/pic.png')

        return  { pic }
    }  

}

</script>

<style>

</style>

我相信它在选项 API 中会像这样工作（当然没有“ref”）。我无法让它与 Composition API 一起使用。我想这可能与“id”有关。另外我如何引用数组中的图像？

谢谢。

Answer 1

您需要先使用 require 函数请求图像，然后将返回值传递给 ref。并且您应该使用 v-bind 绑定 src 属性。

这是一个基于您的代码的完整示例：

<template>
    <div>
        <img v-bind:src="pic">
    </div>
</template>


<script>

import { ref } from 'vue'
export default {

    setup(){

        const pic = ref(require('../assets/pic.png'))

        return  { pic }
    }  

}

</script>

<style>

</style>

Answer 2

我遇到了同样的问题，使用 require 对我来说不起作用，最后，我得到了这个：

<template>
    <div>
        <img v-bind:src="pic">
    </div>
</template>


<script>

import pic from '../assets/pic.png'
export default {

    setup(){
    }  

}

</script>

Answer 3

对我来说，使用 vue 组合风格是这样工作的：

<script setup lang="js">
import { ref } from 'vue'
import imageOrigin from '../assets/images/gestionalmacen.png'

const image = imageOrigin

</script>

<template>
    <div class="tituloPagina">
        <img v-bind:src="image">
        <h1>Gestor de Almacen</h1>
    </div>
    
</template>

在这里，我首先导入 img url，然后使用该链接创建一个常量，我可以在模板中调用该常量。