no aparece imagen en archivo html

eariasvalor · #1 (**permalink**) 03/11/2013, 05:59

Hola a todos:

Soy muy novata en esto, estoy haciendo un ejercicio y tengo un problema para hacer que aparezcan mis imágenes en un archivo html. La ruta es correcta (src="images/menu-desktop.png" />), pero no carga la imagen. He estado probando y si elimino la línea

<base href="http://www.ntwind.com/" />

Entonces sí que carga la imagen, aunque el formato de la página se descoloca.

No sé qué más hacer... Apreciaría mucho cualquier ayuda. Gracias

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Cómo capturar un menú emergente con WinSnap -  Software NTWind</title>
<base href="http://www.ntwind.com/" />
<link rel="stylesheet" type="text/css" href="assets/templates/ntgreen4/main.css?v=4" /> 
<!--[if lt IE 7]>
<style type="text/css">
body { behavior: url(assets/js/csshover3.htc); }
</style>
<script src="assets/js/DD_belatedPNG.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.iconmini2, #placemainmenu ul li ul li, #sb-search-box, .icon_feed, .icon_scr, img');
</script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<link rel="alternate" type="application/rss+xml" title="NTWind News - RSS Feed" href="http://www.ntwind.com/rss.xml" />
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-991225-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="http://www.ntwind.com/" class="replace" id="logo" title="NTWind Software"><span></span>NTWind Software</a>
<ul id="menutop">
<li><a href="newsletter.html">Newsletter</a></li>
<li class="last"><a href="http://www.ntwind.com/rss.xml">RSS Feed</a></li>
</ul>
</div>
<div id="placemainmenu">
<ul id="mainmenu">
<li class="top"><a href="http://www.ntwind.com/" title="" >Productos&nbsp;&nbsp;▼</a><ul>
<li class="top"><a href="/software/winsnap.html" title="Screen capture utility for everyday tasks" >WinSnap</a></li>
<li><a href="/software/windowspace.html" title="Software for large monitors, widescreens and multi-monitor systems" >WindowSpace</a></li>
<li><a href="/software/hstart.html" title="Run applications and batch files without a console window or UAC prompt" >Hidden Start</a></li>
<li><a href="/software/sticky-previews.html" title="Picture-in-Picture control for Windows applications" >Sticky Previews</a></li>
<li><a href="/software/vistaswitcher.html" title="Most elegant and powerful Alt-Tab replacement for Windows" >VistaSwitcher</a></li>
<li class="bottom"><a href="/software/utilities.html" title="Miscellaneous utilities for Windows OS" >Utilidades</a></li>
</ul></li>
<li class="active"><a href="/tutorials.html" title="Learn how to get started with our software" >Tutoriales</a></li>
<li><a href="/store.html" title="Purchase our shareware products" >Tienda Online</a></li>
<li><a href="/contact.html" title="Contact the developer by email" >Contacto</a></li>
<li class="bottom"><a href="/blog.html" title="Get the latest news on our products" >Blog</a></li>
</ul>
<ul id="menupopup">
<li><a href="store/special-offers.html"><em><span class="iconmini2">Descuentos &amp; Ofertas especiales</span></em></a></li>
</ul>
</div>
<div id="contenttop"></div>
<div id="content">
<div id="maincontent">
<div id="contentbig">
<h1>Cómo capturar un menú emergente con WinSnap</h1>
<p>Las capturas de pantalla de menús desplegables o emergentes son una parte crucial de casi cualquier tutorial y guía paso a paso. Normalmente, crear uno puede resultar un poco complejo. Técnicamente, los menús desplegables y emergentes no son ventanas, por lo que desaparecen en cuanto se clica un botón del ratón o se cambia a la ventana de otra aplicación. WinSnap resuelve este problema sin que tenga que hacer ningún tipo de esfuerzo.</p>
<img class="center" alt="Explorer - Menú escritorio" src="images/menu-desktop.png" />
<!-- splitter -->

PHPeros · #2 (**permalink**) 03/11/2013, 08:47

Si especificas una url base, todas las urls relativas buscarán respecto a esa url:

Código:

http://www.ntwind.com/images/menu-desktop.png

Quedaría así, prueba a ver si es correcta.

Trublux · #3 (**permalink**) 06/11/2013, 02:52

¿Has probado a poner la URL de la imágen con la "/" al principio?

Código HTML:

Ver original<img class="center" alt="Explorer - Menú escritorio" src="/images/menu-desktop.png" />

Es una buena práctica poner el ancho y el largo de la imagen.

P.D.: Ya te vale poner todo el HTML para que veamos una imagen que está al final...