6
respostas

Spring MCV - Exibindo as imagens dos produtos

Instrutor Paulo, como eu poderia estar exibindo a imagem dos produtos cadastrados pelo JSP? Afinal, no curso foi ensinado a cadastrá-los com imagens, mas não foi ensinado como acessá-las nos arquivos .jsp.

6 respostas

Oi Adriano, você pode fazer assim:

<img src="${produto.urlImagem}"/>

Onde tem urlImagem vc substitui pelo método da sua classe que retorna a url da imagem cadastrada.

Olá Alberto. Foi a primeira coisa que fiz, mas recebi um belo 404 como retorno. Ainda não tentei implementar algo pelo controller, pois acreditei que o JSP pegaria direto. A pasta que contém as imagens dos produtos fica fora de WEB-INF e resources. Pensei que mudar a rota do file saver para a pasta imagens dentro de resources resolveria, mas deu na mesma.

Tenho a mesma dúvida do Adriano. Eu salvo o path da imagem como (Webapp)"Photos/minhaimagem.jpg". Mas quando eu jogo o path dentro do img src, ele não puxa a imagem. Não sei como faço para gerar o path completo ou como adapto para usar o relativo. Fico no aguardo da resposta.

Basta colocar o contexto antes... Algo como <c:url value="/${produto.urlImagem}"/>

Saudações Sr. Alberto.

Esse é o código da classe ´Produtos´

package br.com.casadocodigo.loja.models;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import javax.persistence.ElementCollection;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

import org.springframework.format.annotation.DateTimeFormat;

@Entity
public class Produto {

    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private int id;

    private String titulo;
    private String descricao;
    private int paginas;

    @DateTimeFormat
    private Calendar dataLancamento;

    @ElementCollection
    private List<Preco> precos = new ArrayList<>();

    private String sumarioPath;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public List<Preco> getPrecos() {
        return precos;
    }

    public void setPrecos(List<Preco> precos) {
        this.precos = precos;
    }

    public Calendar getDataLancamento() {
        return dataLancamento;
    }

    public void setDataLancamento(Calendar dataLancamento) {
        this.dataLancamento = dataLancamento;
    }

    public String getTitulo() {
        return titulo;
    }

    public void setTitulo(String titulo) {
        this.titulo = titulo;
    }

    public String getDescricao() {
        return descricao;
    }

    public void setDescricao(String descricao) {
        this.descricao = descricao;
    }

    public int getPaginas() {
        return paginas;
    }

    public void setPaginas(int paginas) {
        this.paginas = paginas;
    }

    @Override
    public String toString() {
        return "Produto [titulo: " + titulo + ", descrição: " + descricao + ", páginas: " + paginas + "]";
    }

    public String getSumarioPath() {
        return sumarioPath;
    }

    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + id;
        return result;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Produto other = (Produto) obj;
        if (id != other.id)
            return false;
        return true;
    }

    public void setSumarioPath(String sumarioPath) {
        this.sumarioPath = sumarioPath;
    }

    public BigDecimal precoPara(TipoPreco tipoPreco) {
        return precos.stream().filter(preco -> preco.getTipo().equals(tipoPreco))
                .findFirst().get().getValor();
    }

}

Esse é o código da página .jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tags" %>

<tags:pageTemplate titulo="Livros de Java, Android, iOS, Mobile e muito mais!">

    <article id="${produto.id}">
          <header id="product-highlight" class="clearfix">
            <div id="product-overview" class="container">
              <img width="280px" height="395px" src="${produto.sumarioPath}" />
              <h1 class="product-title">${produto.titulo}</h1>
              <p class="product-author">
                <span class="product-author-link">

                </span>
              </p>    

            <p class="book-description">
                ${produto.descricao}
            </p>
            </div>
          </header>

      <section class="buy-options clearfix">  
      <form:form servletRelativeAction="/carrinho/add" method="post" cssClass="container">

        <ul id="variants" class="clearfix">
        <input type="hidden" name="produtoId" value="${produto.id}" />
        <c:forEach items="${produto.precos}" var="preco">
              <li class="buy-option">
                  <input type="radio" name="tipoPreco" class="variant-radio" id="tipo" value="${preco.tipo}"  checked="checked"  />
                <label  class="variant-label">
                  ${preco.tipo} 
                </label>
                <small class="compare-at-price">R$ 39,90</small>
                <p class="variant-price">${preco.valor}</p>
              </li>
        </c:forEach>         
        </ul>
        <button type="submit" class="submit-image icon-basket-alt" alt="Compre Agora" title="Compre Agora ${produto.titulo}!"></button>
        </form:form>

    </section>

    <div class="container">
      <section class="summary">
        <ul>
              <li><h3>E muito mais... <a href='/pages/sumario-java8'>veja o sumário</a>.</h3></li>
        </ul>
      </section>

      <section class="data product-detail">
        <h2 class="section-title">Dados do livro:</h2>
        <p>Número de páginas: <span>${produto.paginas}</span></p>
        <p></p>
        <p>Data de publicação: <fmt:formatDate pattern="dd/mm/yyyy" value="${produto.dataLancamento.time}" /> </p>
        <p>Encontrou um erro? <a href='/submissao-errata' target='_blank'>Submeta uma errata</a></p>
      </section>
    </div>

    </article>    

</tags:pageTemplate>

Na linha 15 está o trecho do código modificado para que a imagem vinculada ao produto seja exibida, no caso <img width="280px" height="395px" src="${produto.sumarioPath}" />. A pasta onde as imagens teoricamente devem ficar é a arquivos-sumario, que fica dentro de webapp. No DB fica salvo apenas o path para a imagem, logo a dita cuja deve ser colocada dentro da pasta para que a aplicação a encontre e seja exiba, certo? Isso eu fiz, mas quando a aplicação é rodada a imagem não é mostrada. Clicando com o botão direito do camundongo, escolhendo a opção "ver imagem", é exibido na tela o erro 404, indicando que o caminho especificado não foi encontrado. O mesmo ocorre se, por exemplo, coloco no .jsp para exibir uma logo dentro da pasta /resources/imagens - mas se passo o path de uma imagem na web, ela é exibida normalmente. Imaginei que talvez seja problema na classe SecurityConfiguration, porém o path pra resources tá liberado:

package br.com.casadocodigo.loja.conf;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpMethod;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.csrf.CsrfFilter;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
import org.springframework.web.filter.CharacterEncodingFilter;

import br.com.casadocodigo.loja.daos.UsuarioDAO;

@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter{

    @Autowired
    private UsuarioDAO ususarioDao;

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http.authorizeRequests()
            .antMatchers("/produtos/form").hasRole("ADMIN")
            .antMatchers("/carrinho/**").permitAll()
            .antMatchers("/pagamento/**").permitAll()
            .antMatchers(HttpMethod.POST, "/produtos").hasRole("ADMIN")
            .antMatchers(HttpMethod.GET, "/produtos").hasRole("ADMIN")
            .antMatchers("/produtos/**").permitAll()
            .antMatchers("/resources/**").permitAll()
            .antMatchers("/").permitAll()
            .antMatchers("/url-magica-maluca-Ad@ghalsjdalskdalçskdalsjdjdkaksçaldkaskj567893478187309182837821092878298371923988hajhsjdhasmdjhasd1332566820012222232232ansdmns").permitAll()
            .anyRequest().authenticated()
            .and().formLogin().loginPage("/login").permitAll()
            .and().logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout"));

        //Encoding
        CharacterEncodingFilter filter = new CharacterEncodingFilter();
        filter.setEncoding("UTF-8");
        filter.setForceEncoding(true);
        http.addFilterBefore(filter, CsrfFilter.class);

    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(ususarioDao)
            .passwordEncoder(new BCryptPasswordEncoder());
    }

}

O que o Sr. sugere que eu faça para conseguir exibir as imagens dos produtos quando a aplicação é rodada?

eu editei minha resposta anterior, eu tinha esquecido de usar as aspas do código.