Exibição de Imagem puxando caminho do banco de dados
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
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
Curtidas 0
Respostas
Marcio Souza
19/11/2018
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.
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.
GOSTEI 0
Rafael Cavasani
19/11/2018
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.
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.
GOSTEI 0
Rafael Cavasani
19/11/2018
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.
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.
GOSTEI 0