Как отобразить изображение?

Question

[svk44]

Есть данные, в которых описаны путь к иконке и текст. Необходимо их вывести.

<template>
...
        <div v-for="menuItem in menuItems" :key="menuItem.text" class="menu__item">
          <div class="menu__ico"><img :src="imageUrl" alt="" /></div>
          <div class="menu__text">{{ menuItem.text }}</div>
        </div>
...
</template>

<script setup lang="ts">

const menuItems = [
  { iconPath: '@/assets/icons/about.svg', text: 'About' },
...
]
const imageUrl = new URL(`${this.iconPath}`, import.meta.url).href

</script>

У меня проблемы с this, не понимаю как вывести необходимую переменную

Comments

[Антон Антон]

А что ты думаешь будет в this?

[Сергей delphinpro]

:src="menuItem.imageUrl"

[svk44]

Антон Антон, undefined?
Бюсь несколько часов, тогда как я могу получить корректный путь?

[svk44]

Сергей delphinpro, вы хотели написать :src="menuItem.iconPath"?

[Сергей delphinpro]

svk44, да

[svk44]

Сергей delphinpro, в этом случае он ничего не выводит

[Сергей delphinpro]

svk44, ну метод для построения URL

const imageUrl = (path) => new URL(path, import.meta.url).href;

:src="imageUrl(menuItem.iconPath)"

[svk44]

Сергей delphinpro, не помогло

[Сергей delphinpro]

svk44, как проявляется ваше "не помогло"? что есть в консоли, что выводится в src по факту?

[svk44]

Сергей delphinpro, консоль выводит в этом случае: GET адрес сервера/src/@/assets/icons/about.svg 404 (Not Found). По факту выводит адрес сервера/src/@/assets/icons/about.svg. Если ввожу путь руками, то все работает

[svk44]

Сергей delphinpro, оказалось, что в iconPath нужно было указать не @/assets/icons/about.svg, а /src/assets/icons/about.svg.