Problema con la ruta del archivo Img Src

14 ago 2013, 10:20:51
Vistas: 86.1K
Votos: 4

Para cargar imágenes correctamente cuando uso img src en HTML, tengo que proporcionar la ruta completa del archivo. Usando CSS solo necesitaría usar:

background-image: url(images/morebutton.png)

Con img src tengo que usar esto:

<img src="wp-content/themes/blankslate/images/morebutton.png">

Usando esta ruta de archivo, la imagen se muestra en la página de inicio, sin embargo, cuando hago clic para ir a la página del artículo, la imagen no se carga... Tengo el mismo problema con mi logo, se muestra en la página de inicio, pero en las páginas adicionales no aparece.

¿Alguien puede decirme si la configuración de la ruta del archivo que tengo es incorrecta?

1
Comentarios

Lee sobre los enlaces relativos y absolutos. El concepto es común y si creas contenido HTML, deberías conocer esto. Luego podrás usar cada uno según convenga, pero primero necesitas entender cómo funcionan. Por ejemplo, la URL en el archivo CSS siempre es relativa a la ubicación del archivo CSS. El enlace SRC siempre es relativo a la ubicación del HTML solicitado, por lo que puede variar si usas el HTML en diferentes ubicaciones.

hakre hakre
14 ago 2013 10:54:09
Todas las respuestas a la pregunta 3
3

No, la configuración de la ruta de tu archivo es correcta, necesitas proporcionar la ruta absoluta en el src de tu img para que las imágenes se carguen en otras páginas, ya que la ruta relativa cambiaría a,

http://tusitio.com/pagina/wp-content/themes/blankslate/images/morebutton.png

y en su lugar debería ser

http://tusitio.com/wp-content/themes/blankslate/images/morebutton.png

Por lo tanto, deberías definir una constante en tu functions.php para la ruta al directorio de imágenes, y luego usarla en el src de img.

if( !defined('THEME_IMG_PATH')){
   define( 'THEME_IMG_PATH', get_stylesheet_directory_uri() . '/images' );
}

y luego puedes usar la etiqueta img así

<img src="<?php echo THEME_IMG_PATH; ?>/morebutton.png" alt="Botón más" title="Botón más"/>

Eso resolvería tu problema. Puedes usar la constante en cualquier parte de tu tema, es muy útil.

14 ago 2013 10:30:45
Comentarios

También puedes adoptar rutas relativas. Al final, el navegador creará un enlace absoluto de todos modos. Lo más importante es que el enlace absoluto creado por el navegador sea correcto. Saber cómo el navegador construye ese enlace es importante, las reglas están en 5. Resolución de Referencia (RFC 3986 - Uniform Resource Identifier (URI): Sintaxis Genérica). Diría que vale la pena conocerlo cuando estás creando HTML.

hakre hakre
14 ago 2013 10:55:55

De acuerdo con la documentación no puedes poner php en una página de WordPress. ¿Dónde exactamente estás colocando este código?

Paul McCarthy Paul McCarthy
21 mar 2020 21:17:22

Esto se está agregando en el archivo del tema.

Kumar Kumar
22 mar 2020 05:01:23
1

Prueba esto:

<img src="<?php echo get_bloginfo( 'template_directory' ); ?>/images/morebutton.png" />

Normalmente dejo que WordPress dirija el tráfico lo más posible para evitar conflictos. Definitivamente también es más fácil usar siempre las funciones predefinidas que están integradas en el núcleo.

14 ago 2013 10:29:55
Comentarios

Estoy subiendo los archivos directamente, si tuviera un poco más de conocimiento con php intentaría esto, ¡la respuesta anterior funcionó para mí! Aprecio la respuesta

excessive34 excessive34
14 ago 2013 10:36:01
0

Puedes usar esta ruta relativa:

<img src='/wp-content/themes/blankslate/images/morebutton.png'>

El / antes de la ruta le indica al navegador que vaya al directorio raíz y busque la carpeta wp-content para continuar desde allí.

Alternativamente siempre puedes usar la ruta URL absoluta en img src. Como

 <img src='http://tudominio.com/wp-content/themes/blankslate/images/morebutton.png'>

mira también aquí cómo subir o bajar las carpetas iniciales de tus rutas relativas

1 oct 2015 10:39:30