Laravel + Vue.js 3 – как получить правильные пути к статическим файлам с изображениями?

Question

[Maксим Волков]

В компоненте Vue.js указан путь к статическому файлу – csv изображению, хранящемуся в папке plabic: "./images/logo.svg"

<template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="./images/logo.svg" alt="logo" width="30" height="24" class="d-inline-block align-text-top">
                Везувий
            </a>            
        </div>
    </nav>
</template>

<script>
	export default {
		name: "Header.vue"
	}
</script>

Однако на фронте получаю битое изображение, так как в пути к указанному файлу VUE – добавляет:

127.0.0.1:5173/resources/js/components/images/logo.svg

И конечно, по указанному адресу данного изображения нет,

Подскажите - Как поправить?
Прошу, укажите на соответствующий раздел документации с актуальной информацией, или ссылку с рабочим примером.

Answer 1

[Сергей delphinpro]

-<img src="./images/logo.svg" alt="logo" width="30" height="24" class="d-inline-block align-text-top">
+<img src="/images/logo.svg" alt="logo" width="30" height="24" class="d-inline-block align-text-top">

Comments

[Maксим Волков]

Благодарю. К сожалению не работает.
Пробовал так, указывал путь без точки. Получаю ошибку.

[Сергей delphinpro]

Maксим Волков, не надо импортировать. Просто в шаблоне прописать абсолютный путь. он не будет резолвиться.

[Maксим Волков]

Sorry.... не совсем понимаю: а как без импорта?

Файл с изображением находится в компоненте Header.vue,
этот компонент импортируется и подключается в корневой App.vue

[Сергей delphinpro]

Maксим Волков, вы сказали, что файл хранится в public/images. почему теперь он вдруг оказался в компоненте Header.vue?

[Maксим Волков]

Сергей delphinpro, Я имею в виду - сам файл logo.svg находится в public/images.
В комgоненте Header.vue - содержится HTML с указанием пути к данному файлу:

<img src="./images/logo.svg" alt="logo" width="30" height="24" class="d-inline-block align-text-top">

[Сергей delphinpro]

Maксим Волков, ну а я повторяю - просто укажите абсолютный путь к картинке и не нужно ее импортировать.

[Maксим Волков]

Сергей delphinpro, Sorry. .. Что то туплю.
А как же импортировать вложенные компоненты, в которых есть ссылки на статические файлы изображений? Не ужели это не работает?

[Сергей delphinpro]

Maксим Волков, размещать картинки в компоненте
Структура (к примеру)

src
  components
    Header
      Header.vue
      logo.svg

Файл компонента Header.vue:
<img src="./logo.svg">