Kan ikke finde billeder baseret på URL i React

Hvis du er ny i React og har problemer med at få adgang til billeder, der er gemt lokalt, er du ikke alene.

Forestil dig, at du har dine billeder gemt i en mappe ved siden af ​​en komponent som denne:

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

Og du prøver at få adgang til billederne i /imgbiblioteket fra 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; 

Du har prøvet stierne ../img/img1.jpgog ..img/img1.jpg, men få Error: Cannot find module ''.

Så hvad sker der her?

Lidt om create-react-app

Som de fleste brugte du sandsynligvis create-react-appbootstrap dit projekt.

I så fald kan det være lidt vanskeligt at bruge relative stier, fordi det create-react-appbygger HTML-, CSS- og JavaScript-filer til en outputmappe:

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

Der er en række måder at bruge billeder på create-react-app, men en af ​​de nemmeste er at inkludere dine billeder i /public. Når dit projekt er bygget, /publicfungerer det som rodmappe.

Du kan læse mere om tilføjelse af billeder eller andre aktiver i Create React App-dokumenterne.

Importerer billeder

Hvis du kiggede på dokumenterne, vil du bemærke, at koden indeholder importudsagn for at indlæse aktiver som billeder og skrifttyper.

Import er nyttigt, når dit aktiv, i dette tilfælde et billede, er i samme bibliotek eller i nærheden af ​​den komponent, der bruger det, og ikke vil blive brugt andre steder. For eksempel, hvis du har en inputkomponent med knapper, der bruger SVG'er til tommelfinger op og tommelfinger ikoner.

En smule fordel ved at bruge importer, at det vil kaste en fejl under byggetiden, hvis der er en skrivefejl. Denne form for kontrol hjælper med at sikre, at brugerne ikke kan se et ødelagt billede, der gled forbi.