无法在 Spring 引导中加载映像

Question

我正在使用 Spring Boot 和 Thymeleaf 制作一个体育电子商务网站，在产品索引页面和特定产品的编辑页面中，我无法查看该产品的图像。 This is how the edit a product page (inspect on Chrome) looks

这是用于编辑产品的 HTML 代码。当前图像下方的行是为编辑和索引生成错误的行。

<div class="form-group">
                <label for="">Image:</label>
                <input type="file" class="form-control" th:name="file" th:id="file">
                <img class="mt-2" src="#" alt="" id="imgPreview1">
                <br><br>
                <label for="">Current image:</label>
                <img style="width: 100px;" th:src="@{'media/'+${product.image}}"> 
            </div>

我从 src/main/resources/static/media 中的媒体文件夹中获取图像，并从数据库中获取产品名称。从数据库中获取图像文件的名称没有错误。看起来像是路径错误，但我似乎无法弄明白。

Answer 1

在spring启动时，默认在“templates”文件夹下搜索页面，默认在“static”文件夹下映射资源。要访问静态文件夹下的图像文件，请尝试

/image-path/image.ext

例如，我在static下有一个src文件夹，里面有一些图片，logo.png然后，

/src/logo.png

Answer 2

您的 HTML 或 JSP 页面始终在 ../resources/templates/ 中，您的图像路径是 ../resources/static/media/。要从 static 文件夹中获取图像，您必须使用当前文件夹中的 ../ 返回并转到 static 文件夹内的 media 文件夹...

变化：

../resources/static/media/liverpool_21_22_home_kit.jpg

收件人：

../media/liverpool_21_22_home_kit.jpg

无法在 Spring 引导中加载映像

Cannot Load Image in Spring Boot

html

image

spring-mvc

thymeleaf