Как отобразить изображение на странице в spring, thymeleaf?

Question

[MarkusEfr]

Приветствую.
Пишу веб-приложение на spring boot, thymeleaf, bootstrap и немного другого. Пытаюсь отобразить картинку на странице, но это не получается. Структура проекта и как я это делаю видно на скрине

Также пробовал делать как пишут тут https://stackoverflow.com/questions/51083414/cant-... и другими способами, но пока решить проблему не удалось.

Кто знает как это сделать помогите плиз.

Судя по ответу, проблема в пути к ресурсу, но как мне его правильно задать? ../ в начале пути не помогает, как и прописать полный путь от проекта к картинке.

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Начнем с самого простого...
Предположим, что вы загрузили изображения в папку img, которая лежит в static ( resources/static/img/myImage.jpg )
Если вы используете шаблонизатор thymeleaf, то в шаблоне нужно задать:
<img th:src="@{img/myImage.jpg}" alt=""/>
У вас на скрине ошибка, так как вы просто вставили картинку в атрибут src, а пути некооректные (404 ошибка), так как не учтен context path. У вас наверняка приложение открывается по урлу localhost:8080/contextPath
Кстати, урлы к внутренним ссылкам, скриптам и стилям задаются точно также ( th:href="@{/url/url}" )

Также заметил небольшой баг, с чем это связано не знаю, возможно intellij idea, возможно spring boot...
В общем, если даже перезапустить приложение, даже при корректных путях к файлам может быть 404 или 500 (насколько я понял, это происходит при настроенном spring security). Чтобы избежать этих ошибок, нужно сделать Rebuild project, а потом запустить. Столкнулся с этим только в одном проекте.

Comments

[MarkusEfr]

Спасибо за ваш ответ, попробую так сделать

[MarkusEfr]

Попробовал, указал путь как <img th:src="@{img/myImage.jpg}" alt=""/> и пере собрал проект, но увы изображение не появилось. Security я не использую и проект пишу в Eclipse, очень странно

[Орхан Гасанлы]

MarkusEfr, как вариант, можете залить проекта на гит и скинуть мне ссылку, я гляну

[MarkusEfr]

azerphoenix, проект находится тут https://github.com/MarkusEfr/Market

[Орхан Гасанлы]

Итак, я просмотрел ваш проект:
1) SoftwareRepository не обозначен, как @Repository

@Repository
public interface SoftwareRepository extends CrudRepository<Software, Long>{

}

2) В welcome.html вижу это:

<img class="img-thumbnail" src="../img/facebook_cover_photo_1.png"/>
    <img src="../img/facebook_cover_photo_1.png" width="1000"
             th:src="@{img/facebook_cover_photo_1.png}"/>

заменил на:

<img th:src="@{/img/facebook_cover_photo_1.png}" alt="">

3) структура директорий отличается от стандартного проекта.
По умолчанию gradle / maven считает директорию static в качестве корневого каталога для статики и templates для шаблонов. У вас она была удалена.

Было:


Должно быть:


Обратите внимание, что в моем случае есть директория static, в которую вложена папка img

Результат:

[MarkusEfr]

azerphoenix, отлично, спасибо большое ! применю эти изменения

Answer 2

[maksfax]

у меня возникла аналогичная ситуация картинка не открывается ни по<img th: src = "@ {/ images / polygon.png}" /> ни по<img src = "/ images / polygon.png" /> .Как можно решить эту проблему