Github pages are not showing images

Question

Images are not showing on my site on github pages. This is my site:https://rsgrw23.github.io/rate-your-beer/

Locally everything is working fine. This is the repository: https://github.com/rsgrw23/rate-your-beer What is wrong?

For example, here's an excerpt of src/components/home.vue <template>:

<template>
    <div class="home">
        <img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
        <header class="home__header">
            <transition appear appear-active-class="bounce-enter-active">
                <h1>"Czasem najlepszym wyjściem</h1>
            </transition>
            <transition appear appear-active-class="bounce-enter-active">
                <h2>Jest wyjście na piwo"</h2>
            </transition>
        </header>
        <main class="home__main">
            <h1 class="home__title">Fun Facts</h1>
            <article class="home__article">
                <div class="home__content content-1"><h1>Lepsze od wody?</h1>
                <p>W mi... dziś.</p></div>
                <img class="home__img img-1" src="src/assets/wish-you-beer-here.jpg" alt="piwo">
            </article>
            <article class="home__article">
                <img class="home__img img-2" src="src/assets/beer-mine.jpg" alt="piwo">
                <div class="home__content content-2"><h1>Nie tylko z chmielem</h1>
                <p>Je...em.</p>
                <p>Co cie...ika!</p></div>
            </article>
            <article class="home__article">
                <div class="home__content content-3"><h1>IPA czyli napój żołnieży</h1>
                <p>Bry...wa.</p></div>
                <img class="home__img img-3" src="src/assets/water.jpg" alt="piwo">
            </article>
        </main>
        <div class="description">
            <div class="description__content">
                <div class="description__article">
                    <h1 class="description__header">Piłeś piwko?</h1>
                    <h2 class="description__header">Oceń je!</h2>
                </div>
            </div>
        </div>
    </div>
</template>

Images are located at src/assets/craft-beer.jpg for instance.

Can you post your code? – Ru Chern Chong Mar 18 '18 at 02:39 — Ru Chern Chong, Mar 18 '18 at 02:39

score 0 · Answer 1 · answered Mar 18 '18 at 03:25

So webpack is able to find the images and process them as resources, you should reference the assets (images) via relative paths, not absolute paths.

So, considering a file at /src/components/home.vue with images at /src/assets (being / the project root), instead of:

<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">

Use:

<img class="home__img__header" src="../assets/craft-beer.jpg" alt="Craft Beer">

Naturally, in other files, change the relative path accordingly.

score 0 · Answer 2 · answered Mar 18 '18 at 04:05

For the images to work with Vue the generated file there are few ways.Here is an SO link on the same.

How to import and use image in a Vue single file component?

What you will want to do here is something like this.

<img class="home__img__header" src="~src/assets/craft-beer.jpg" alt="Craft Beer">

This lets the webpack know about the image being an asset and generate its path appropriately.

Github pages are not showing images

2 Answers2