0

This is my Personne class:

@Entity
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Personne {
    
    @Id
    @GeneratedValue()
    private int id;
    @Column(length = 20 , nullable = false )
    private String frist_Name;
    @Column(length = 20 , nullable = false )
    private String last_Name;
    @Column(length = 10 , nullable = false , unique = true )
    private String cni;
    private String car_plate;
    private String Adress;
    @Column(length = 45 , nullable = true)
    private String image;
    
    @Transient
    public String getImagePath() {
        if (image == null || id == 0) return null;
        
        return "/user-photos/"+ id + "/" + image;
    }
}

this is my Controller : savePersonne Methode that store the personne it works fine but maybe i'm forgeting something

@PostMapping("/Personnes/save")
    public String savePersonne(Personne personne, @RequestParam("file") MultipartFile file) throws IOException {
        
        String fileName = StringUtils.cleanPath(file.getOriginalFilename());
        personne.setImage(fileName);
        
        Personne savedPerso = repo.save(personne);
        
        String uploadDir = "./user-photos/" + savedPerso.getId();
        
        FileUploadUtil.saveFile(uploadDir, fileName, file);
        
        return "redirect:/personnes";   
    }

And this is the saveFile methode code :

public static void saveFile(String uploadDir, String fileName,
            MultipartFile multipartFile) throws IOException {
        Path uploadPath = Paths.get(uploadDir);
         
        if (!Files.exists(uploadPath)) {
            Files.createDirectories(uploadPath);
        }
         
        try (InputStream inputStream = multipartFile.getInputStream()) {
            Path filePath = uploadPath.resolve(fileName);
            System.out.println(filePath.toFile().getAbsolutePath());
            Files.copy(inputStream, filePath, StandardCopyOption.REPLACE_EXISTING);
        } catch (IOException ioe) {        
            throw new IOException("Could not save image file: " + fileName, ioe);
        }

the folder /user-photos/ is created and it store the image but some reason the image can't be displayed

this my view code using thymleaf as a server side template:

<tbody>
            <th:block th:each="personne : ${listPersonnes}">
                <tr>
                    <td><img th:src="@{${personne.imagePath}}" style="width: 100px;height: 100px"></td>
                    <td>[[${personne.frist_Name}]]</td>
                    <td>[[${personne.last_Name}]]</td>
                    <td>[[${personne.adress}]]</td>
                    <td>[[${personne.cni}]]</td>
                    <td>[[${personne.car_plate}]]</td>
                    
                    <td>
                    <a th:href="@{'/personnes/edit/' + ${personne.id}}">Edit</a>
                    &nbsp;
                    <a th:href="@{'/personnes/delete/' + ${personne.id}}">Delete</a>
                    </td>
                    
                </tr>
            </th:block>
        </tbody>
el idrissi oussama
  • 36
  • 5
  • I’m not familiar with thymleaf and I don’t know how it deals with resolving files from paths, but as far as I know src on img tag is supposed to be a URL. See here how to render inline base64 encoded content https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html. For this to work you will have to return the actual image content to render where you have the image path at the moment. – Pawel Zieminski Nov 11 '22 at 21:18
  • Otherwise you will have to create a controller to serve the image contents separately and on the image src generate a URL that would be resolved to this controller. At runtime, this would result in a separate request from the client to get the image. The generated file URL will have to have the identifier which allows you to get at the entity/file. One advantage of doing it this way is that your serving logic can use HTTP caching headers to get the client to only request the image if it has changed. – Pawel Zieminski Nov 11 '22 at 21:29

0 Answers0