Как вывести изображения на страницу в Spring Boot?

Рейтинг: -1Ответов: 1Опубликовано: 31.03.2023

Прошу у вас помощи по выводу изображений на страницу.

Я вижу что изображения находятся в базе данных. что они нормально добавляются вмести с товаром. Но при выводе этих изображений с деталями товара, я не вижу изображений.

При добавлении новой единицы изображения сохраняются в базу данных: При добавлении новой единицы изображения сохраняются в базу данных:

Затем после того как перехожу в вкладку "item-info" вместо картинок я вижу ярлыки: Затем почле того как перехожу в вкладку "item-info" вместо картинок я вижу ярлыки:

А в консоли я вижу это В консоли я вижу это.

Я понимаю, что я делаю что то не так и где то у меня ошибка, но видать мне знаний либо мозги не хватает что бы найти неправильный запрос, неправильное представление...

package com.fuji.inventory.fujiInv.models;

Models\Image.class

import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Entity
@Table(name = "images")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Image {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
    private Long id;
    @Column(name = "name")
    private String name;
    @Column(name = "originalFileName")
    private String originalFileName;
    @Column(name = "size")
    private Long size;
    @Column(name = "contentType")
    private String contentType;
    @Column(name = "isPreviewImage")
    private boolean isPreviewImage;
    @Column(length = 10000000)
    @Lob
    private byte[] bytes;

    @ManyToOne(cascade = CascadeType.REFRESH, fetch = FetchType.EAGER)
    private ItemName itemName;

    @ManyToMany(cascade = CascadeType.REFRESH, fetch = FetchType.EAGER)
    private List<InvItem> invItem;
}

Services\AssetNameService.class

package com.fuji.inventory.fujiInv.service;

import com.fuji.inventory.fujiInv.models.Image;
import com.fuji.inventory.fujiInv.models.ItemName;
import com.fuji.inventory.fujiInv.repositories.ItemNameRepository;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.List;

@Service
@Slf4j
@RequiredArgsConstructor
public class AssetNameService {
public final ItemNameRepository itemNameRepository;

public List<ItemName> assetList(String assettype){
    if(assettype != null) return itemNameRepository.findAllByAssettype(assettype);
    return itemNameRepository.findAll();
}

public void saveAsset(ItemName itemName, MultipartFile file1, MultipartFile file2, MultipartFile file3) throws IOException {
    Image image1;
    Image image2;
    Image image3;

    if(file1.getSize() != 0){
        image1 = toImageEntity(file1);
        image1.setPreviewImage(true);
        itemName.addImageToItemName(image1);
    }
    if(file2.getSize() != 0){
        image2 = toImageEntity(file2);
        itemName.addImageToItemName(image2);
    }
    if(file3.getSize() != 0){
        image3 = toImageEntity(file3);
        itemName.addImageToItemName(image3);
    }

    ItemName itemFromDB = itemNameRepository.save(itemName);
    itemFromDB.setPreviewImageId(itemFromDB.getImages().get(0).getId());
    itemNameRepository.save(itemName);
}

private Image toImageEntity(MultipartFile file) throws IOException {
    Image image = new Image();
    image.setName(file.getName());
    image.setOriginalFileName(file.getOriginalFilename());
    image.setContentType(file.getContentType());
    image.setSize(file.getSize());
    image.setBytes(file.getBytes());
    return image;
}

public void deleteAsset(Long id){
    log.info("Asset with ID \"{}\" ({}) was deleted", id, getItemByID(id));
    itemNameRepository.delete(getItemByID(id));
}

public ItemName getItemByID(Long id){
    return itemNameRepository.findById(id).orElse(null);
}
}

Constrollers/ImageController.class Я подозреваю, что ошибка где то тут. что запрос не правильный....но не могу еще найти литературу...

package com.fuji.inventory.fujiInv.controllers;

import com.fuji.inventory.fujiInv.models.Image;
import com.fuji.inventory.fujiInv.repositories.ImageRepository;
import com.fuji.inventory.fujiInv.service.ItemService;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.InputStreamResource;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.io.ByteArrayInputStream;

@RestController //no needed to present anything
@RequiredArgsConstructor
public class ImageController {
    private final ImageRepository imageRepository;

    @GetMapping("/image/{id}")
    private ResponseEntity<?> getImageByID(@PathVariable Long id){
        Image image = imageRepository.findById(id).orElse(null);
        return ResponseEntity.ok()
            .header("filename", image.getOriginalFileName())
            .contentType(MediaType.valueOf(image.getContentType()))
            .contentLength(image.getSize())
            .body(new InputStreamResource(new ByteArrayInputStream(image.getBytes())));
    }
}

Repositories\ImageRepository.class

package com.fuji.inventory.fujiInv.repositories;

import com.fuji.inventory.fujiInv.models.Image;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface ImageRepository extends JpaRepository<Image, Long> {
    List<Image> getImagesByItemName_AssetModel(String itemModel);
}

Constrollers/InvController.class

    @GetMapping("/item/{id}")
public String itemInfo(@PathVariable Long id, Model model){
    InvItem item = itemService.getItemById(id);
    List<Image> images = itemService.getImagesByItemName_Assettype(item.getItem_model());
    model.addAttribute("item", item);
    model.addAttribute("images", images);
    return "item-info";
}

И вот открывая item-info.ftlh я хотел бы видеть картинки, того или иного девайса. но вижу всего лишь ярлыки и ошибки

item-info.ftlh

<#list images as img>
<div>
    <div>
        ${img.getId()}
        <img src="/images/${img.getId()}" alt="">
        <img src="/images/${img.id}" alt="">
        <img src="${img.getId()}" alt="">
        <img src="${img.id}" alt="">
    </div>
    <div>
        ${img.getOriginalFileName()}
    </div>
    <img src="/images/${img.originalFileName}" alt="${img.originalFileName}">
</div>
</#list>

Ответы

▲ 0Принят

Похоже на опечатку в путях к картинкам:

  • В контроллере маппинг обозначен @GetMapping("/image/{id}")
  • В HTML файле URL картинки: <img src="/images/${img.getId()}" alt=""> или img src="${img.getId()}" alt="">

Нужно либо исправить маппинг в контроллере на images/{id}, либо соответственно изменить ссылки в HTML на image/${img.getId()}.

Обращение к картинке по идентификатору img src="${img.getId()}" alt=""> не имеет особого смысла.