Zdjęcia nie wyświetlają się w html ze ścieżki plików składowanych w buckecie AWS s3

0

Hej,
Przychodzę do was z pewnym, problemem, który nie udaje mi się do tej pory rozwiązać.

Mam aplikację, która umożliwia uploadowanie plików do bucketu w AWS S3.
Następnie zapisuję sobie wygenerowaną ścieżkę do bazy danych.
Problem najprawdopodobniej związany z tym, że pliki zamiast otwierać się w przeglądrce, domyślnie się pobierają... ale nie wszystkie.Przykładowo 1. z poniższych linków się pobiera, a 2. wyświetla tylko w przeglądarce, test zrobiłam na kilku plikach i niektóre się pobierają, niektóre otwierają.
Udało mi się znależć coś, że metadata obiektu powinna być ustawiona na :"image/jpg", ale mimo to, to nie pomogło.

  1. https://dizzys3.s3.eu-central-1.amazonaws.com/logo.png
  2. https://dizzys3.s3.eu-central-1.amazonaws.com/java%20null%20pointer%20exception.jpg

Mój kod:

 @PostMapping("/upload")
    public String addMeme(@RequestParam("file") MultipartFile file,
                          HttpServletRequest httpServletRequest,
                          Model model,
                          @Valid @ModelAttribute("memeModel") MemeModel memeModel,
                          BindingResult bindingResult) {
//...

        BasicAWSCredentials credentials = new BasicAWSCredentials(s3AccessKey, s3SecretKey);

        AmazonS3 amazonS3 = AmazonS3Client.builder()
                .withRegion("eu-central-1")
                .withCredentials(new AWSStaticCredentialsProvider(credentials))
                .build();

        try {
            InputStream inputStream = file.getInputStream();
            ObjectMetadata objectMetadata = new ObjectMetadata();
            objectMetadata.setContentType("image/jpg");

            amazonS3.putObject(new PutObjectRequest(bucketName,
                    file.getOriginalFilename(), inputStream, objectMetadata)
                    .withCannedAcl(CannedAccessControlList.PublicRead));

            S3Object s3Object = amazonS3.getObject(new GetObjectRequest(bucketName, file.getOriginalFilename()));
            String path = s3Object.getObjectContent().getHttpRequest().getURI().toString();  // Ścieżka do pliku

Było by wszystko OK, gdyby się to pobierało. ale jeśli by się poprawnie wyświetlało w pliku html


   <tr th:each="temp: ${files}">
            <td>

                <p>
                    <img src="${files.path}"  class="mr-3 mt-3 rounded-circle" style="width:60px;">
                </p>
            </td>
        </tr>

W zmiennej ${files} przechowuję wcześniej pobrane ścieżki do zdjęć z bucketu.

Finalnie wyświetla się: https://imgur.com/VBiK8n2

Jakieś porady jak to można rozwiązać?

0
  1. Naprawdę tworzysz klienta per każde żądanie? :)
  2. Jaki błąd leci w konsoli przeglądarki? Może ścieżka jest skopana albo błąd w szablonie. Przeglądarka powinna dociągnąć assety.
  3. Jesteś pewna, że upload do S3 jest wykonywany synchronicznie, tzn. ten get() zaraz po put() jest OK?
0

@Charles_Ray: Co do 1. rozumiem, że lepiej włożyć w @PostConstruct tworzenie klienta, a uploadowanie zostawić pod tym endpointem? :D

Jestem troszkę bliżej celu. Jak widzę,głupi błąd, zmieniłam na: (Zapomniałam dodać, że korzystam z Thymeleafa..)

      <img th:src="@{temp.path}"  class="mr-3 mt-3 rounded-circle" style="width:60px;">

Nie zmieniło faktu, bo i dalej się nie wyświetla, Linki z bazy są poprawne, jak wstawie " na sztywno" w HTML'u URL do zdięcia - działa.
Wyświetlam również w ten sam sposób ścieżkę - też jest OKEJ.

Sądzę, żę w powyższym zapisie jest problem, ale i dokumentacja Thymeleaf'a i inne strony twierdzą, że zapis jest w porządku.
0

Właśnie miałem pisać, ze ten szablon mi się nie podoba. Zobacz jaki HTML jest generowany i jaki błąd dostajesz. Odnośnie (1) to tak, klienta twórz tylko raz.

0

Faktycznie, Spróbowałam z "$" zamiast "@" jak pisze w dokumentacji:


             <img th:src="${temp.path}" style="width:170px;">

i działa!
Dzięki za pomoc!

1 użytkowników online, w tym zalogowanych: 0, gości: 1