@DJFRX

Почему не отображается картинка Thymeleaf?

Здравствйте. Подскажите, почему не показывается картинка? https://github.com/GridyushkoF/ImageThymeleaf. - Демо проект, в котором я решил попробовать сохранить и отобразить картинку для применения этого в более сложном проекте.
Папка uploads на месте и в неё все файлы нормально добавляются. Но почему картинка не показывается, а вместо неё вот такое:
651072ecbc8cb678858187.png
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ответы на вопрос 1
enovoselov
@enovoselov
Инженер
На сколько я понимаю подход, который вы выбрали для загрузки картинки, используется для статических ресурсов, которые могут находятся в другом месте от приложения и вряд ли предоставят гибкости для вашего большого проекта. Лучше воспользоваться данным гайдом https://spring.io/guides/gs/uploading-files/

Более лучшее решение написать свой контроллер и сервис для обработки запроса на предоставление файлов, это вам предоставит больше гибкости.

Для решения вашего подхода попробуйте сначала вывести картинку из этой папки без загрузки через форму. Потом добавить загрузку.

Протестировал у себя и ниже предоставляю рабочий вариант

application.properties который использовал
file-storage-directory=/home/user_name/storage

Представление upload.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Upload form</title>
</head>
<body>
<form th:action="@{/upload}" method="post" enctype="multipart/form-data">
    <input type="file" name="image" id="image" accept="image/*">
    <button type="submit">Save</button>
</form>
<img th:if="${imageName}" th:src="@{'/images/' + ${imageName}}" alt="Uploaded Image">
</body>
</html>


Контроллер
@Controller
public class ImageController {
    private final String fileStorageDirectory;

    public ImageController(@Value("${file-storage-directory}") String fileStorageDirectory) {
        this.fileStorageDirectory = fileStorageDirectory;
    }

    @GetMapping("/upload")
    public String getUploadForm() {
        return "upload";
    }

    @PostMapping("/upload")
    public String processUpload(@RequestParam MultipartFile image, Model model) {
        try {
            Files.write(Path.of(fileStorageDirectory, image.getOriginalFilename()), image.getBytes());
            model.addAttribute("imageName", image.getOriginalFilename());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return "upload";
    }
}


Конфигуратор
@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
    private final String fileStorageDirectory;

    public MvcConfig(@Value("${file-storage-directory}") String fileStorageDirectory) {
        this.fileStorageDirectory = fileStorageDirectory;
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
                .addResourceHandler("/images/**")
                .addResourceLocations("file:" + fileStorageDirectory + File.separator)
                .setCachePeriod(3600)
                .resourceChain(true)
                .addResolver(new PathResourceResolver());
    }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы