Bilder basierend auf der URL in React können nicht gefunden werden

Wenn Sie React noch nicht kennen und Probleme beim Zugriff auf lokal gespeicherte Bilder haben, sind Sie nicht allein.

Stellen Sie sich vor, Sie haben Ihre Bilder in einem Verzeichnis neben einer Komponente wie dieser gespeichert:

/src /components - component1 - component2 /img - img1 - img2

Und Sie versuchen, auf die Bilder im /imgVerzeichnis zuzugreifen von component2:

import React, { Component, useState, useEffect } from 'react'; import { render } from 'react-dom' import { useTransition, animated, config } from "react-spring"; import imgArr from './images'; import '../App.css'; const Slideshow = () => { const [index, set] = useState(0) const transitions = useTransition(imgArr[index], item => item.id, { from: { opacity: 0 }, enter: {opacity: 1 }, leave: { opacity: 0 }, config: config.molasses, }) useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), []) return transitions.map(({ item, props, key }) => (    )) } const slideshowContainerStyle = { width: '80%', height: '300px' } export default Slideshow; 

Sie haben die Wege ausprobiert ../img/img1.jpgund ..img/img1.jpg, aber bekommen Error: Cannot find module ''.

Also, was ist hier los?

Ein bisschen über create-react-app

Wie die meisten Leute haben Sie wahrscheinlich create-react-appIhr Projekt gebootet.

In diesem Fall kann die Verwendung relativer Pfade etwas schwierig sein, da create-react-appdie HTML-, CSS- und JavaScript-Dateien in einem Ausgabeordner erstellt werden:

/public - index.html - bundle.js - style.css

Es gibt eine Reihe von Möglichkeiten, Bilder zu verwenden create-react-app. Eine der einfachsten Möglichkeiten besteht jedoch darin, Ihre Bilder einzubeziehen /public. Wenn Ihr Projekt erstellt wird, /publicdient es als Stammverzeichnis.

Weitere Informationen zum Hinzufügen von Bildern oder anderen Elementen finden Sie in den Create React App-Dokumenten.

Bilder importieren

Wenn Sie sich die Dokumente angesehen haben, werden Sie feststellen, dass der Code importAnweisungen zum Laden von Assets wie Bildern und Schriftarten enthält.

Der Import ist nützlich, wenn sich Ihr Asset, in diesem Fall ein Image, im selben Verzeichnis oder in der Nähe der Komponente befindet, die es verwendet, und nirgendwo anders verwendet wird. Zum Beispiel, wenn Sie eine Eingabekomponente mit Schaltflächen haben, die SVGs für Daumen hoch und Daumen runter Symbole verwenden.

Ein kleiner Vorteil der Verwendung importist, dass während der Erstellungszeit ein Fehler ausgegeben wird, wenn ein Tippfehler vorliegt. Diese Art der Überprüfung stellt sicher, dass Benutzer kein fehlerhaftes Bild sehen, das vorbeigekommen ist.