@ilavio

Как правильно вставлять картинки в html представления и настраивать Thymeleaf?

Здравствуйте! Не могу разобраться со spring приложением. Как внем правильно вставлять картинки в html. В документах к Thymeleaf написано следующие про метод addResourceHandlers : Add a resource handler for serving static resources based on the specified URL path patterns. The handler will be invoked for every incoming request that matches to one of the specified path patterns.

Patterns like "/static/**" or "/css/{filename:\\w+\\.css}" are allowed. See AntPathMatcher for more details on the syntax.

Returns:
a ResourceHandlerRegistration to use to further configure the registered resource handler

Что в переводе: Добавьте обработчик ресурсов для обслуживания статических ресурсов на основе указанных шаблонов пути URL. Обработчик будет вызываться для каждого входящего запроса, который соответствует одному из указанных шаблонов пути.

Разрешены такие шаблоны, как "/ static / **" или "/css/{filename:\\w+\\.css}". См. AntPathMatcher для получения дополнительных сведений о синтаксисе.

Возврат:
ResourceHandlerRegistration для дальнейшей настройки зарегистрированного обработчика ресурсов.

Но это мне это ни чего не объясняет: 1) где распологать эту папку static? после папки webapp или java, main?
2) как правильно указывать ссылку на картинку в html в теге ?
3) Расматривая примеры методов указания путей .addResourceHandler("/resources/**")
.addResourceLocations("/resources/static/img/"); Вообще мозг сварачивает. Пытаешся найти папку в пути чужого проекта, а ее нет там. Тогда откуда ты взялся этот путь?
И у всех на примерах обрезанные пути (не от начала корневой папки), чтобы понять где конкретно нужно создавать эти паки с ресурсами?
package www.ilil.com.config;

import java.util.concurrent.TimeUnit;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.CacheControl;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewResolverRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring5.view.ThymeleafViewResolver;

@Configuration
@ComponentScan("www.ilil.com")// пакет для сканирования классов
@EnableWebMvc  // заменяет тег <mvc:annotation-driven/> и подлючает WEB функции
public class ApplicationContext1 implements WebMvcConfigurer {
	
	private final ApplicationContext applicationContext;

    @Autowired
    public ApplicationContext1 (ApplicationContext applicationContext) {
        this.applicationContext = applicationContext;
    }

    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        templateResolver.setCharacterEncoding("UTF-8");
        return templateResolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        templateEngine.setEnableSpringELCompiler(true);
        return templateEngine;
    }
    
    public void configureViewResolvers (ViewResolverRegistry registry) {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setCharacterEncoding("UTF-8");
        resolver.setTemplateEngine(templateEngine());
        registry.viewResolver(resolver);
    }

    public void addResourceHandlers(final ResourceHandlerRegistry registry) {
        
        registry
                .addResourceHandler("/resources/**")
                .addResourceLocations("/spring-web-app2/src/main/resources/static/img/");
    }
    
	public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
	    configurer.enable();
	}
    

}


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Красотка здесь</title>
<style>
</style>

</head>
<body>
	<h1>Крастока ЗДЕСЬ</h1>
	<img th:src="@{img/myImage.jpg}" width="300" height="200" alt="Штучка">


</body>
</html>


6023a0f762a70094156552.png
  • Вопрос задан
  • 811 просмотров
Решения вопроса 1
@ilavio Автор вопроса
Всем Большое спасибо! Мне удалось решить данную проблему. В самом html я указал:
<img th:src="@{/img/girl1.jpg}" width="300" height="200" alt="Штучка"/>


При настройке Thymeleaf в методе addResourceHandlers написал следующее:
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
        
        registry
                .addResourceHandler("/img/**")
                .addResourceLocations("classpath:/static/img/");
    }


Так же я выяснил что если у вас много источников с папками, то можно указывать списком через запятую.
Как можно сделать выввод в 1-ом методе мы указываем папку где лежит картинка, а 2-омметоде указываем предыдущую папку той папки где лежит картинка.
Папка resources у меня вложена в папку main на уровне с папкой java как на кортинке в самом вопросе.
И спасибо Источнику: подобный вопрос
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
azerphoenix
@azerphoenix Куратор тега Spring
Java Software Engineer
Добрый день!
Картинки проекта нужно добавлять в директорию resources/static Можно создать директорию images и соответственно, путь будет /resources/static/images
А уже все последующие загружаемые файлы через фронт можно хранить либо на распределеных файловых системах, либо где-нибудь на хостинге.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы