Nije moguće pronaći slike temeljene na URL-u u programu React

Ako ste novi u Reactu i imate problema s pristupom lokalno pohranjenim slikama, niste sami.

Zamislite da imate svoje slike pohranjene u direktorij pored komponente poput ove:

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

I pokušavate pristupiti slikama u /imgdirektoriju iz 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; 

Isprobali ste staze ../img/img1.jpgi ..img/img1.jpg, ali nađite Error: Cannot find module ''.

Pa što se ovdje događa?

Malo o create-react-app

Kao i većina ljudi, vjerojatno ste i vi nekada create-react-apppokretali svoj projekt.

U tom slučaju, upotreba relativnih staza može biti malo nezgodno jer create-react-appgradi datoteke HTML, CSS i JavaScript u izlaznu mapu:

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

Postoji nekoliko načina za korištenje slika create-react-app, ali jedan od najjednostavnijih je uključivanje slika u njih /public. Kada je vaš projekt izgrađen, /publicsluži kao korijenski direktorij.

Više o dodavanju slika ili drugih sredstava možete pročitati u dokumentima Create React App.

Uvoz slika

Ako ste pogledali dokumente, primijetit ćete da kôd uključuje importizjave za učitavanje sredstava poput slika i fontova.

Uvoz je koristan kada se vaše sredstvo, u ovom slučaju slika, nalazi u istom direktoriju ili u blizini komponente koja ga koristi i neće se koristiti nigdje drugdje. Na primjer, ako imate ulaznu komponentu s gumbima koji koriste SVG-ove za ikone palca gore i palca dolje.

Mala prednost korištenja importje ta što će se pojaviti pogreška tijekom vremena izrade ako postoji greška u kucanju. Ovakva provjera osigurava da korisnici neće vidjeti slomljenu sliku koja je promaknula.