Exibição de Imagem puxando caminho do banco de dados

19/11/2018

0

E ai moçada. Estou tentando implementar a inclusão e exibição de fotos no meu sistema spring boot com thymeleaf.
Eu segui uma aula da devmedia e já estou conseguindo salvar o arquivo. O problema é na hora de exibir. Eu salvo o caminho no banco de dados e estou copiando os arquivos pra uma pasta no meu aplicativo /static/photos. Estou tentando exibir pelo caminho do arquivo, desse jeito:

<div class="file-col col-md-2 float-left mt-2" th:each="attendmentFiles, rowStat : *">
<div class="col-12 float-left px-0 py-2">
<img th:src="@{*{attendmentFiles[__${rowStat.index}__].path}}" class="img-fluid"/>
</div>
</div>

Ele só exibe a imagem depois que reinicio o servidor. Antes disso é como se o arquivo não existisse.
Alguem pode me dar uma ajuda, por favor?
Obrigado
Rafael Cavasani

Rafael Cavasani

Responder

Posts

20/11/2018

Marcio Souza

Olá Rafael,
não se salva imagens dessa forma dentro do pacote da aplicação. Na aplicação você deve ter apenas imagens consideradas estáticas, como banner, ícones, uma imagem de loading... O problema na sua operação é que a aplicação precisa refazer o deploy dentro do servidor web (tomcat) para que as alterações surtam efeito. Por isso, quando você inicializa a aplicação as imagens aparecem e quando não reinicia elas não aparecem mesmo estando lá dentro do diretório que você salvou.
Responder

20/11/2018

Rafael Cavasani

Fala Marcio, tudo bem? Obrigado por ter respondido. Entendi.
Já imaginava isso tb. Agora tentei salvar no diretório C:/uploads/ e não aparece a foto tb.
<img th:src="@{*{attendmentFiles[__${rowStat.index}__].path}}" class="img-fluid"/>
Onde o src final ficaria "C:/uploads/foto.jpg".
Vi em alguns lugares que precisaria colocar o "src" para um caminho no controller e lá tratar a imagem em uma outputStream, mas em nenhum exemplo que vi consegui fazer dar certo.
É isso mesmo que preciso fazer?
Obrigado.
Responder

20/11/2018

Rafael Cavasani

Boa tarde Marcio. Obrigado pela ajuda.

Consegui dessa maneira:
<img th:src="@{'/image/get/' + *{attendmentFiles[__${rowStat.index}__].id}}" class="img-fluid"/>

e no controller ficou:
@GetMapping("/image/get/")
@ResponseBody
public ResponseEntity<?> showImage(@PathVariable Long id) {
Optional<AttendmentFile> attendmentFile = attendmentFileService.findById(id);
if(attendmentFile.isPresent()){
try{
Resource file = resourceLoader.getResource("file:photos/" + attendmentFile.get().getPath());
return ResponseEntity.ok()
.contentLength(attendmentFile.get().getSize())
.contentType(MediaType.IMAGE_JPEG)
.body(new InputStreamResource(file.getInputStream()));
}catch (Exception e){
return ResponseEntity.badRequest()
.body("Não foi possível encontrar a imagem.");
}
}else{
return ResponseEntity.badRequest()
.body("Não foi possível encontrar a imagem.");
}
}

Os arquivos ficam armazenados na pasta photos, na raiz do meu projeto.
Obrigado.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar