Почему не находит изображение и выдает ошибку 404?

Question

[Anonymous]

Здравствуйте! Делаю компоненты, были обычные элементы в странице на Vue, перенес в компоненты(так как часто переиспользую), прописываю:

<TheatreBlockDiv>
       <TheatreBlockImg src="@/assets/Image.png" alt="Изображение"/>
       <h3 class="theatre-block__div-title">Изображение</h3>
</TheatreBlockDiv>

Код компонента:

<template>
    <img class="theatre-block__img" src>
</template>

<script>
export default {
    name: "TheatreBlockImg"
}
</script>

<style scoped>
.theatre-block__img {
    display: block;
    width: 100%;
}
</style>

И картинки не находит, однако если прописать просто как обычные элементы(не компоненты), то все ок. Почему так происходит?
Путь верный!!!

Comments

[Вадим]

Предположу потому что сборщик не делает резолв пути до картинки в таком случае.

Answer 1

[Дмитрий Кузнецов]

TheatreBlockImg не является стандартным блоком для изображения, так что указывая src="@/assets/Image.png" alt="Изображение" ни чего происходить не будет.
В компоненте TheatreBlockImg вам нужно прокинуть пропсы и потом с помощью пропсов вставлять в тег img уже эти данные.

+ комментарию от Вадим

Comments

[Вадим]

Не обязательно. Так как img - root элемент в компоненте, то всё что не прописано в компоненте в пропсах - итак прокинется как атрибут на img

[Дмитрий Кузнецов]

Вадим, о таком даже и не задумывался, спасибо что просветили.

[Anonymous]

А дело в том, что атрибут прокидывается и с ним все хорошо, но почему-то путь нормально не делает...
Попробую пропсы.

[Anonymous]

Правда неудобно в моем случае...

[Anonymous]

Вадим, в том то и дело, как заставить сборщик прокидывать нормальный путь?

[Вадим]

Никита Савченко, для начала написать какой у вас сборщик, а потом поставить соответствующий тэг у вопроса. Тогда быстрее придут те кто знает

[Anonymous]

Вадим, Webpack вроде...

[Anonymous]

Дмитрий Кузнецов, дошли руки до вашего решения, не работает :(
Прокинул пропсы в компоненте, ввожу:
:src="img"
И оно прокидывается, но! изображение не отображается все-равно