Как мне сослаться на изображение внутри функции установки в Composition API в Vue 3?

Как ссылаться на изображение в функции настройки в Composition API? Путь: "../assets/pic.png"

Если я использую путь непосредственно внутри шаблона, как src в теге img, изображение отображается на странице. Когда я его проверяю, он показывает имя изображения, за которым следует идентификатор, а затем расширение файла, например: «/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 опций (конечно, без ссылки). Я не могу заставить его работать с Composition API. Я думаю, это может быть связано с идентификатором. Также как мне ссылаться на изображения в массиве?

Спасибо.


vue.js vuejs3 vue-component vue-composition-api
person Mark Okoh    schedule 28.02.2021    source источник
comment
для ссылки на изображения в массиве вы будете регулярно использовать комбинацию v-for. Вы можете прочитать об с использованием ссылки на массив в v-for в документации.   -  person wittgenstein    schedule 28.02.2021

Ответы (2)


arrow_upward
0
arrow_downward

пробовали ли вы использовать ссылки на шаблоны?

<template>
  <img ref="pic" :src="picUrl" />
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const pic = ref(null)
    const picUrl = ref('https://v3.vuejs.org/logo.png')

    onMounted(() => {
      console.log(pic.value) // <img src="https://v3.vuejs.org/logo.png">
    })

    return {
      pic,
      picUrl
    }
  }
}

после установленного хука console log будет ссылаться на элемент изображения.

person wittgenstein    schedule 28.02.2021

arrow_upward
0
arrow_downward

Сначала вам нужно запросить изображение с помощью функции require, а затем передать возвращенное значение в ref. и вы должны связать атрибут src с v-bind.

вот полный пример, основанный на вашем коде:

<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>
person Ayoub ElHayat    schedule 15.05.2021