[RESOLVIDO] - Como carregar no header.jsp de um projeto VRaptor: imagem png + js + css

10 respostas
P

Pessoal,

Iniciando no VRaptor, não consigo em meu projeto de estudo fazer o cabeçalho (header.jsp) ser lido por completo. Não carrega o logo nem os js e css.

Testei os caminhos absoluto e relativo, jstl etc, mas sem resultados.

A única coisa que me veio em mente seria o VRaptor. Algo sobre o contexto, mapeamento enfim... com estou vendo o framework pela primeira vez, fico sem muitas ideias para tentar resolver este problema.

A estrutura Webcontent do projeto está na imagem anexa.

Segue código do header.jsp:

obs: no código vocês verão que tentei algumas formas distintas de carregar o dito PNG, mas todas sem sucesso.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Cabeçalho</title>
		
		<link type="text/css" href="/WEB-INF/jsp/resources/css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet">
		<script type="text/javascript" src="/WEB-INF/jsp/resources/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/WEB-INF/jsp/resources/js/jquery-ui-1.8.21.custom.min.js"></script>
	</head>
	<body>

			<c:set var="path"><c:url value="/" /></c:set>
			
			<c:url value="${path}/WEB-INF/jsp/layout/caelum.png" var="imagem" />
			<img src="${imagem}" />

			
			<img src="caelum.png" />
			
			<img src="<%=request.getContextPath() %>//WEB-INF/jsp/layout/caelum.png" />
			
			<img src="/caelum.png" />
			
			<img src="../caelum.png" />
			
			<h2>Controle de Produtos</h2>
			
			<hr />

	</body>
</html>

10 Respostas

L

os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">

G

Lucas Cavalcanti:
os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">

Os arquivos podem sim estar em WEB-INF, mas terá que fazer um Controller faça o handle desses resources.

P

Lucas Cavalcanti:
os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">

Obrigado Lucas!

Foi apenas alterar a pasta. Já consegui apontar corretamente para o jquery, imagem e css poelo caminho absoluto.

P

guilherme.dio:
Lucas Cavalcanti:
os css, js e imagens não podem estar dentro da WEB-INF

e sempre use o <c:url value="/caminho/pro/arquivo">

Os arquivos podem sim estar em WEB-INF, mas terá que fazer um Controller faça o handle desses resources.

Obrigado pela sugestão Guilherme. Quando me aprofundar mais neste framework vou utilizar sua dica .

L

A menos que vc tenha algo dinâmico nesses arquivos, vc não ganha nada fazendo um Controller pra eles.

Deixe os arquivos fora do WEB-INF, que já resolve o problema.

R

Bom dia,

tenho um problema similar, soh que eh com o jquery UI e o css.

Dentro do arquivo de css do jquery UI temos caminhos lá pra algumas imagens da lib
exemplo

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

bem, o caminho de images está como vem na UI

Porem meu projeto com vraptor está:

META-INF
WEB-INF

jsps
WEBCONTENT
css
js
img

Ele acha de boa na pagina, carrega e tudo, soh que não consegue achar as imagens dentro do CSS

Obrigado

L

existe a pasta images dentro da pasta css?

R

Não a pasta css soh possui CSS

ai o WebContent ficou assim

WebContent

css

jqueryUI.css
images

todas as imagens do UI
js

arquivos js

Quando mando executar o projeto ele não acha as imagens necessárias do UI.

R

Resolvi colocando o caminho absoluto da aplicação. o Caminho do meu site. é correto esse metodo?

L

no css do ui tá:

url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png)

se quiser que a pasta images fique fora da pasta css, vc precisa substituir todas as urls parecidas com a acima por:

url(../images/ui-bg_gloss-wave_55_5c9ccc_500x100.png)
Criado 7 de julho de 2012
Ultima resposta 26 de set. de 2012
Respostas 10
Participantes 4