31

Arreglando carga de la imagen "logo.png" de PlatziMusic al hacer deploy a Github Pages

En el video “Enviando una aplicación con Vue.js a producción”, al acceder al sitio usando Github Pages, la imagen del logo no carga correctamente. Lo pueden ver en esta imagen.

Esto se debe a la forma en la que está configurado el file-loader de nuestro archivo webpack.config.js:

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
}

Esto hace que la ruta resultante a la que hace referencia el atributo src del la etiqueta img del logo tenga al final un código hash, quedando de esta forma en el HTML renderizado:

<img src="/dist/logo.png?82b9c7a5a3f405032b1db71a25f67021">

Para que esto no ocurra, basta con quitar ?[hash] del string asignado a la propiedad name:

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
}

Además de esto, no hace falta establecer rutas directas a la página para el script del archivo HTML ni para el src del logo en el código fuente, por lo tanto:

En el script del HTML:

<scriptsrc="https://gabrielnz.github.io/platzimusic-vuejs/dist/build.js"></script>

Lo dejamos de esta forma:

<scriptsrc="dist/build.js"></script>

En la etiqueta template del archivo App.vue:

img(src='https://gabrielnz.github.io/platzimusic-vuejs/dist/logo.png')

Lo dejamos de esta forma:

img(src='dist/logo.png')

Por último corremos de nuevo el comando npm run build, actualizamos los cambios en la rama master de nuestro repositorio de Github, esperamos unos segundos, recargamos nuestra página y listo.

Aquí les dejo el enlace a mi página 😃

Escribe tu comentario
+ 2
Ordenar por:
6
1032Puntos

Excelente tutorial, gracias por compartirlo, te has ganado una manito arriba 😉

1
1629Puntos

Hermano excelente ayuda, muchas gracias por el tutorial, todo a la perfección.

1
3124Puntos

Muchas gracias amigo!

1
3172Puntos

Gracias por tu aporte

1
1267Puntos

Se agradece el tutorial

0
251Puntos

Excelente explicación simple y fácil de cambiar y entender.

0
425Puntos

Muchas gracias por la aportación, jamás lo habría adivinado. O al menos habría tardado muchísimo 😄

0
9101Puntos

Tremendo aporte bro, gracias.

0
6428Puntos

Gran aporte para el curso! Debería incluirse como material destacado, sin duda.

Gracias Gabriel.

0
3116Puntos

Compañero, pedazo de explicación y pedazo de tutorial.

Muchas gracias por tu solución.

0
6729Puntos

Saludos, como podría, cargar archivos pdf, docx etc, que estén en src/assets a partir de un enlace.