Dacă sunteți nou în React și aveți probleme cu accesarea imaginilor stocate local, nu sunteți singur.

Imaginați-vă că aveți imaginile stocate într-un director lângă o componentă ca aceasta:

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

Și încercați să accesați imaginile din /img director din 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 }) => (
    <animated.div
      key={key}
      className="bg"
      style={{ ...props, slideshowContainerStyle}}
    >
      <img className="img" src={require(item.url)} alt=""/>
    </animated.div>
  ))
}

const slideshowContainerStyle = {
 width: '80%',
 height: '300px'
}


export default Slideshow;

Ai încercat cărările ../img/img1.jpg și ..img/img1.jpg, dar ia Error: Cannot find module '<path>' .

Deci, ce se întâmplă aici?

Un pic despre create-react-app

Ca majoritatea oamenilor, probabil ați folosit create-react-app pentru a porni proiectul.

În acest caz, utilizarea căilor relative poate fi un pic dificilă deoarece create-react-app construiește fișierele HTML, CSS și JavaScript într-un folder de ieșire:

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

Există o serie de moduri de utilizare a imaginilor create-react-app, dar una dintre cele mai ușoare este să includeți imaginile în /public. Când proiectul dvs. este construit, /public servește ca director rădăcină.

Puteți citi mai multe despre adăugarea de imagini sau alte materiale în Creați documente React App.

Importul imaginilor

Dacă ați aruncat o privire asupra documentelor, veți observa că codul include import declarații pentru a încărca materiale precum imagini și fonturi.

Importarea este utilă atunci când materialul dvs., în acest caz o imagine, se află în același director sau lângă componenta care îl folosește și nu va fi utilizat nicăieri altundeva. De exemplu, dacă aveți o componentă de intrare cu butoane care utilizează SVG-uri pentru pictograme cu degetul în sus și cu degetul în jos.

Un pic avantajul utilizării import este că va genera o eroare în timpul timpului de construcție dacă există o greșeală de tipar. Acest tip de verificare vă ajută să vă asigurați că utilizatorii nu vor vedea o imagine ruptă care a trecut.