为什么不加载本地图像？答案

【问题标题】：Why aren't local images loading?为什么不加载本地图像？
【发布时间】：2022-01-11 15:12:49
【问题描述】：

我正在尝试在 NextJS 中制作幻灯片，但显然本地图像没有在 nextjs 中加载，也没有错误。没有使用幻灯片时会加载图像。我认为问题出在 JavaScript 代码上，但我无法找出错误。

Here 是幻灯片现在的样子。

components/Slideshow.jsx

import styles from '../styles/slideshow.module.css';
import Head from 'next/head';
import Script from 'next/script';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

const Slideshow = () => {
    return (
        <>
            <Head>
                <Script src="/scripts/slideshow.js"></Script>
            </Head>
            <div className={`${styles.slider}`}>
                <div className={`${styles.slide}`}>
                    <img src="/assests/images/minecraft_builds/MC_AseanHq_1.png" alt="" />
                    <div className={`${styles.info}`}>
                        <h2>ASEAN HQ</h2>
                        <p>This is our wonderful HQ, Built in Minecraft in 1: 1 scale.Very iconic!</p>
                    </div>
                </div>
                <div className={`${styles.slide}`}>
                    <img src="/assests/images/minecraft_builds/MC_Pratumtani_2.png" alt="" />
                    <div className={`${styles.info}`}>
                        <h2>Pratumtani</h2>
                        <p>This is big and wide downtown area, with many tall skyscrapers.</p>
                    </div>
                </div>
                <div className={`${styles.slide}`}>
                    <img src="/assests/images/minecraft_builds/MC_SingaporeSkyline_1.png" alt="" />
                    <div className={`${styles.info}`}>
                        <h2>Singapore Skyline</h2>
                        <p>The Singapore Skyline is an Opulent, Modern beautiful skyline and a sight to behold, especially at night.</p>
                    </div>
                </div>
                <div className={`${styles.slide}`}>
                    <img src="/assests/images/minecraft_builds/MC_RamkhanhaengUniversity.png" alt="" />
                    <div className={`${styles.info}`}>
                        <h2>Ramkhanhaeng University</h2>
                        <p>The Spawnpoint of the ASEAN BTE server,where new players spawn and start building</p>
                    </div>
                </div>
                <div className={`${styles.slide}`}>
                    <img src="/assests/images/minecraft_builds/MC_SingaporeSkyline_2.png" alt="" />
                    <div className={`${styles.info}`}>
                        <h2>Singapore Skyline</h2>
                        <p>Beautiful build, rainy day, and with shaders makes it look a even better.</p>
                    </div>
                </div>
                <div className={`${styles.slide}`}>
                    <img src="/assests/images/minecraft_builds/MC_DemonarcyMonument.png" alt="" />
                    <div className={`${styles.info}`}>
                        <h2>Democracy Monument</h2>
                        <p>The Democracy Monument is a public monument in the city center of Bangkok, capital of Thailand.</p>
                    </div>
                </div>
                <div className={`${styles.navigation}`}>
                    <FontAwesomeIcon icon={faChevronLeft} className="prev-btn" />
                    <FontAwesomeIcon icon={faChevronRight} className="next-btn" />
                </div>
                <div className={`${styles.navigation_visibility}`}>
                    <div className={`${styles.slide_icon} ${styles.active}`}></div>
                    <div className={`${styles.slide_icon}`}></div>
                    <div className={`${styles.slide_icon}`}></div>
                    <div className={`${styles.slide_icon}`}></div>
                    <div className={`${styles.slide_icon}`}></div>
                    <div className={`${styles.slide_icon}`}></div>
                </div>
            </div>
        </>
    );
}

export default Slideshow;

public/scripts/slideshow.js

const slider = document.querySelector(".slider");
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const slideIcons = document.querySelectorAll(".slide-icon");
const numberOfSlides = slides.length;
var slideNumber = 0;

//image slider next button
nextBtn.addEventListener("click", () => {
    slides.forEach((slide) => {
        slide.classList.remove("active");
    });
    slideIcons.forEach((slideIcon) => {
        slideIcon.classList.remove("active");
    });

    slideNumber++;

    if (slideNumber > numberOfSlides - 1) {
        slideNumber = 0;
    }

    slides[slideNumber].classList.add("active");
    slideIcons[slideNumber].classList.add("active");
});

//image slider previous button
prevBtn.addEventListener("click", () => {
    slides.forEach((slide) => {
        slide.classList.remove("active");
    });
    slideIcons.forEach((slideIcon) => {
        slideIcon.classList.remove("active");
    });

    slideNumber--;

    if (slideNumber < 0) {
        slideNumber = numberOfSlides - 1;
    }

    slides[slideNumber].classList.add("active");
    slideIcons[slideNumber].classList.add("active");
});

//image slider autoplay
var playSlider;

var repeater = () => {
    playSlider = setInterval(function () {
        slides.forEach((slide) => {
            slide.classList.remove("active");
        });
        slideIcons.forEach((slideIcon) => {
            slideIcon.classList.remove("active");
        });

        slideNumber++;

        if (slideNumber > numberOfSlides - 1) {
            slideNumber = 0;
        }

        slides[slideNumber].classList.add("active");
        slideIcons[slideNumber].classList.add("active");
    }, 4000);
};
repeater();

//stop the image slider autoplay on mouseover
slider.addEventListener("mouseover", () => {
    clearInterval(playSlider);
});

//start the image slider autoplay again on mouseout
slider.addEventListener("mouseout", () => {
    repeater();
});

// Fade away effect
var header = document.getElementById("header");

function fadeOutOnScroll(element) {
    if (!element) {
        return;
    }

    var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;
    var elementHeight = element.offsetHeight;
    var scrollTop = document.documentElement.scrollTop;

    var opacity = 1;

    if (scrollTop > distanceToTop) {
        opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
    }

    if (opacity >= 0) {
        element.style.opacity = opacity;
    }
}

function scrollHandler() {
    fadeOutOnScroll(header);
}

window.addEventListener("scroll", scrollHandler);

【问题讨论】：

您的图片是否位于public 文件夹中？您是否在 devtools 的网络选项卡中看到与图像相关的任何错误？此外，next/script 不应在 next/head 中使用。
@juliomalves 是的，我的图像在public 文件夹中。我在 devtools 中没有看到任何错误。
@juliomalves，我可以知道next/script 应该在哪里，因为我已经关注this stackoverflow 答案
该答案使用常规的<script> 标签，而不是next/script。只需在没有 next/head 包装器的情况下使用它。
哦，对不起，我把script误读为Script

标签： javascript css next.js slideshow

【解决方案1】：

尝试先导入图像，然后添加该图像。我可以看到你正在使用<img/>。只有next/image 组件会读取保存在Assets 中的图像。如果您使用的是<img/>。为了显示图像，您必须更改一些下一个配置。

在你的 next.config.js 文件中写入它-

const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

这里你必须安装next-images。

npm i next-images

否则，您可以将图像存储或保存到公共文件夹中。那么您不需要在下一个配置中安装和此设置。

然后在您的组件中。先导入图片

import ImagesName from "/assests/images/minecraft_builds/MC_SingaporeSkyline_1.png"
// Give image source correctly. I don't know your folder structer..

并将导入的图像添加到您的组件中。

 <div className={`${styles.slide}`}>
    <img src={ImagesName} alt="" />
    <div className={`${styles.info}`}>
        <h2>Singapore Skyline</h2>
        <p>The Singapore Skyline is an Opulent, Modern beautiful skyline and a sight to behold, especially at night.</p>
    </div>
 </div>

【讨论】：

请注意，在使用 <img> 标签时，引用来自 public 文件夹的图像也非常好。您无需额外设置即可使其工作。
是的，您可以将图像保存到公共文件夹中。那么你还没有安装next-images，也不需要任何下一个配置设置。
@SiamAhnaf，我在公用文件夹中有我的资产，我尝试导入图像，但我面临此错误Module not found。 Here 是我的文件结构，我要使用的图像存在于assests/images/minecraft_builds 文件夹中。
你能创建一个codeSandBox吗？
它将是/assests/images/minecraft_builds/image-name.jpg