我正在尝试在 SpringBoot 应用程序中显示已保存到数据库中的产品图像。 在我的前端显示时图像是空白的

Question

图像保存到数据库没有问题，但是当我试图在我的前端显示时，我得到的是空白图像。 我也在努力理解图像保存的逻辑。 我把它保存在 /user-photos 中，你会在我的代码中看到路径是这样的：/user-photos/" + "0" + "/" + image；起初零是 id，因为我认为就是这样它会保存，但我注意到它们都保存到 /user-photos/0 但无论哪种方式图像都没有显示 - 这是我的代码。

@Entity
@Table(name = "msItem")
public class Item {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long itemId;
@Column(nullable = false, length = 45)
private String itemName;
@Column(nullable = false)
private int itemPrice;
@Column(nullable = false, length = 100)
private String itemDesc;
@Column(nullable = false, length = 100)
private String category;
@Column(nullable = false, length = 100)
private String image;
@ManyToOne(fetch = FetchType.EAGER, cascade = CascadeType.ALL)
@JoinColumn(name = "id")
private User user;

@Transient
public String getPhotosImagePath() {

    return "/user-photos/" + "0" + "/" + image;
}

@PostMapping("/products/save")
public String itemAdd(Item item,  @RequestParam("file") MultipartFile multipartFile, Principal principal, RedirectAttributes redirectAttributes) throws IOException {
    User user = userRepository.findByEmail(principal.getName());
    item.setUser(user);
    String fileName = StringUtils.cleanPath(multipartFile.getOriginalFilename());
    item.setImage(fileName);
    String uploadDir = "user-photos/" + item.getItemId();

    FileUploadUtil.saveFile(uploadDir, fileName, multipartFile);
    itemRepository.save(item);


    redirectAttributes.addFlashAttribute("message", "Product Listed for sale");
    return "home_page";
}

@Configuration
public class MvcConfig implements WebMvcConfigurer {


@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    exposeDirectory("user-photos", registry);
}

private void exposeDirectory(String dirName, ResourceHandlerRegistry registry) {
    Path uploadDir = Paths.get(dirName);
    String uploadPath = uploadDir.toFile().getAbsolutePath();

    if (dirName.startsWith("../")) dirName = dirName.replace("../", "");

    registry.addResourceHandler("/" + dirName +   "/**").addResourceLocations("file:/"+ uploadPath + "/");
}
}



In the html page: 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>List products</title>
<link rel="stylesheet" type="text/css"   href="/webjars/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript"   src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<style>
body {
background-image: url('MarketSwipe.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="container text-center">

<div th:if="${message}" class ="alert alert-success text-center">
    [[${message}]]
</div>
<div>
    <h2>Manage My Products</h2>
</div>

<div>
    <table class="table table-striped table-bordered">
        <thead class="thead-dark">
        <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Description</th>
            <th>$ Price</th>
            <th>Manage Product</th>

        </tr>
        </thead>
        <tbody>
        <tr th:each="item: ${listItems}">
            <td> <img th:scr="${item.photosImagePath}"      style="width: 100px; height: 100px;"></td>
            <td th:text="${item.itemName}">Name</td>
            <td th:text="${item.itemDesc}">Description</td>
            <td th:text="${item.itemPrice}">Price</td>
            <td>
                <a class="btn btn-primary mt 4"   th:href="@{'/products/update/' + ${item.itemId}}">Update</a>
                <a class="btn btn-danger"   th:href="@{'/products/delete/' + ${item.itemId}}">Delete</a>

            </td>
        </tr>
        </tbody>
    </table>
</div>
</div>
</body>
</html>

Answer 1

您将其称为 scr，而不是 src

th:src="${item.photosImagePath}"