javascript - ReactJS og bilder i offentlig mappe

Jeg er ny i ReactJS og jeg ønsker å importere bilder i en komponent. Disse bildene er inne i public-mappen, og jeg vet ikke hvordan jeg skal få tilgang til mappen fra React-komponenten.

Noen ideer?

REDIGER

Jeg vil importere et bilde inne i Bottom.js eller Header.js

Strukturmappen er:

Jeg bruker ikke webpack. Bør jeg?

Rediger 2

Jeg vil bruke webpack for å laste inn bildene og resten av ressursene. Så i konfigurasjonsmappen min har jeg de følgende filene:

Hvor trenger jeg å legge til banene til bildene, og hvordan?

Takk

Svar #1

Du trenger ingen webpack-konfigurasjon for dette.

I komponenten din oppgir du bare bildebane. React vil vite at den er i offentlig katalog.

<img src="/image.jpg" alt="image" />

Svar #2

For å referere til bilder offentlig finnes det to måter jeg vet hvordan man gjør det på en direkte måte. Den ene er som ovenfor fra Homam Bahrani.

bruker

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

Og siden dette fungerer, trenger du egentlig ikke noe annet, men dette fungerer også...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Svar #3

React-dokumentasjonen forklarer dette godt i dokumentasjonen, du må bruke process.env.PUBLIC_URL med bilder plassert i public-mappen. Se her for mer informasjon

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

Svar #4

1- Det er bra hvis du bruker webpack for konfigurasjoner, men du kan enkelt bruke bildefilenes sti, og React vil finne ut at den er i public-mappen.

<img src="/image.jpg">

2- Hvis du vil bruke webpack, som er en standard praksis i React, kan du bruke disse reglene i filen din webpack.config.dev.js.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

da kan du importere bildefilen i React-komponenter og bruke den.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Relaterte artikler