Question

我的网站上github页面上没有显示图像。这是我的网站：https://rsgrw23.github.io/rate-your-beer/

当地一切正常。这是存储库：https://github.com/rsgrw23/rate-your-beer 有什么问题？

例如，这里是 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>

例如，图片位于 src / assets / craft-beer.jpg 。

Answer 1

所以webpack能够找到图像并将它们作为资源处理，你应该通过相对路径引用资产（图像），而不是绝对路径。

因此，考虑 /src/components/home.vue 的文件，图片位于 /src/assets （ / 项目根目录），而不是：

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

使用：

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

当然，在其他文件中，相应地更改相对路径。

Answer 2

对于与Vue一起使用的图像，生成的文件有几种方法。这是一个SO链接。

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

你想要做的就是这样。

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

这让webpack知道图像是资产并适当地生成它的路径。

Github页面没有显示图像

2 个答案: