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

djp7away 于 11个月前发布在 Vue.js

关注(0)|答案(3)|浏览(181)

如何在合成API的Setup函数中引用图像？路径为“../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>

字符串
我相信它在Options API中会像这样工作（当然没有'ref'）。我不能让它在Composition API中工作。我想这可能与'id'有关。另外，我如何引用数组中的图像？
谢谢.

vue.js

来源：https://stackoverflow.com/questions/66411122/how-do-i-reference-an-image-inside-the-setup-function-in-the-composition-api-in

3条答案

按热度按时间

68bkxrlz1#

需要先用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>

字符串

赞(0）回复(0）举报 12个月前

pbossiut2#

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

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

<script>

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

    setup(){
    }  

}

</script>

字符串

赞(0）回复(0）举报 12个月前

pu3pd22g3#

从我这里，使用vue composition style它是这样工作的：

<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，然后用这个链接创建一个常量，我可以在模板中调用这个常量。

赞(0）回复(0）举报 12个月前

我来回答

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

3条答案

相关问题

热门标签

最新问答