Lokale afbeeldingen laden in React.js

Ik heb React geïnstalleerd met behulp van create-react-app. Het is goed geïnstalleerd, maar ik probeer een afbeelding in een van mijn componenten te laden (Header.js, bestandspad: src/components/common/Header.js) maar het laadt niet. Hier is mijn code:

import React from 'react'; 
export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>
        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
            <img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
} 

Als ik het afbeeldingspad schrijf als src={require('./src/images/logo.png')}in mijn logo1variabele, geeft het de fout:

Kon niet compileren.

Fout in ./src/Components/common/Header.js

Module niet gevonden: ./src/images/logo.png in /var/www/html/wistful/src/Components/common

Help me dit op te lossen. Laat me hier weten wat ik fout doe.


Antwoord 1, autoriteit 100%

Als je vragen hebt over het maken van React App, raad ik je aan om de Gebruikershandleiding.
Het beantwoordt deze en vele andere vragen die u mogelijk heeft.

Om specifiek een lokale afbeelding op te nemen, heeft u twee opties:

  1. Gebruik import:

    // Assuming logo.png is in the same folder as JS file
     import logo from './logo.png';
     // ...later
     <img src={logo} alt="logo" />
    

Deze aanpak is geweldig omdat alle activa worden afgehandeld door het buildsysteem en bestandsnamen met hashes krijgen in de productiebuild. Je krijgt ook een foutmelding als het bestand wordt verplaatst of verwijderd.

Het nadeel is dat het omslachtig kan worden als je honderden afbeeldingen hebt, omdat je geen willekeurige importpaden kunt hebben.

  1. Gebruik de openbare map:

    // Assuming logo.png is in public/ folder of your project
     <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
    

Deze aanpak wordt over het algemeen niet aanbevolen, maar het is geweldig als je honderden afbeeldingen hebt en ze een voor een importeren te veel gedoe is. Het nadeel is dat je moet nadenken over cache-busting en zelf moet uitkijken voor verplaatste of verwijderde bestanden.

Hopelijk helpt dit!


Antwoord 2, autoriteit 17%

Als je de afbeelding wilt laden met een local relative URLzoals je doet. React-project heeft een standaard publicmap. U moet uw map imageserin plaatsen. Het zal werken.

voer hier de afbeeldingsbeschrijving in


Antwoord 3, autoriteit 4%

In React of andere Javascript-modules die intern Webpack gebruiken, als de src-attribuutwaarde van img wordt gegeven als een pad in tekenreeksindeling zoals hieronder aangegeven

e.g. <img src={'/src/images/logo.png'} /> or <img src='/src/images/logo.png' />

dan tijdens het bouwen, bevat de uiteindelijke HTML-pagina src=’/src/images/logo.png’. Dit pad wordt niet gelezen tijdens het bouwen, maar wordt gelezen tijdens het renderen in de browser. Als de logo.png op het moment van renderen niet wordt gevonden in de map /src/images, wordt de afbeelding niet weergegeven. Als u de console in de browser opent, ziet u de 404-fout voor de afbeelding. Ik geloof dat je de ./src-directory wilde gebruiken in plaats van de /src-directory. In dat geval is de ontwikkelmap ./src niet beschikbaar voor de browser. Wanneer de pagina in de browser wordt geladen, zijn alleen de bestanden in de ‘public’ directory beschikbaar voor de browser. Dus wordt aangenomen dat het relatieve pad ./src de map public/src is en als de logo.png niet wordt gevonden in de map public/src/images/, wordt de afbeelding niet weergegeven.

Dus de oplossing voor dit probleem is om ofwel je afbeelding in de openbare map te plaatsen en naar het relatieve pad van de openbare map te verwijzen, of de trefwoorden importof requirete gebruiken in React of een Javascript-module om het Webpack te informeren om dit pad tijdens de bouwfase te lezen en de afbeelding op te nemen in de uiteindelijke bouwuitvoer. De details van beide methoden zijn uitgewerkt door Dan Abramov in zijn antwoord, raadpleeg het of gebruik de link: https://create-react-app.dev/docs/adding-images-fonts-and-files/


Antwoord 4, autoriteit 3%

Je hebt verschillende manieren om dit te bereiken, hier is een voorbeeld:

import myimage from './...' // wherever is it.

in je img-tag zet je dit gewoon in src:

<img src={myimage}...>

Je kunt hier ook officiële documenten bekijken: https://facebook.github. io/react-native/docs/image.html


Antwoord 5

Probeer in plaats van img src=”” een div te maken en de achtergrondafbeelding in te stellen als de gewenste afbeelding.

Op dit moment werkt het voor mij.

voorbeeld:

App.js

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  render() {
    return (
      <div>
        <div className="myImage"> </div>
      </div>
    );
  }
}
export default App;

App.css

.myImage {
  width: 60px;
  height: 60px;
  background-image: url("./icons/add-circle.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

Antwoord 6

Om lokale afbeeldingen naar uw React.js-toepassing te laden, moet u de parameter requiretoevoegen in mediasecties zoals of Afbeeldingstags, zoals hieronder:

image={require('./../uploads/temp.jpg')}

Antwoord 7

Eerst moet u een map maken in de src-directory en vervolgens de gewenste afbeeldingen plaatsen.

Maak een mappenstructuur zoals

src->images->linechart.png

importeer deze afbeeldingen vervolgens in het JSX-bestand

import linechart from './../../images/linechart.png'; 

dan moet je het gebruiken in afbeeldingen zoals hieronder.

<img src={linechart} alt="piechart" height="400px" width="400px"></img>

Antwoord 8

In de nieuwste versie van React.js v17.0.1 kunnen we de lokale afbeelding die we hebben niet nodig hebben om deze te importeren.
zoals we vroeger deden = required(‘../../src/Assets/images/fruits.png’);
Nu moeten we het importeren zoals = fruit importeren van ‘../../src/Assets/images/fruits.png’;

Voor React V17.0.1 kunnen we required(../) gebruiken en het werkt prima.


Antwoord 9

Er zijn hier veel goede antwoorden en meer deskundige meningen dan ikzelf. Maar ik zal gewoon mijn ervaring delen en wat voor mij werkte.
Ik irriteerde me aan het feit dat er zoveel is om alleen maar afbeeldingen toe te voegen. Daarom hier is wat ik deed-

Maak een aparte component (bestand) myimages.jsx

import image1 from "../img/someimage.png";
import image2 from "../img/otherimage.png";
const ImageData=[image1,image2,image3]
export default ImageData;

Ik heb toen deze ImageData-component in het bestand (component) I geïmporteerd zoals ik de afbeeldingen gebruik. Op deze manier heb ik van een component een ‘map’ gemaakt om al mijn afbeeldingen te krijgen.
Zoals ik al zei, geen expert, maar dit loste mijn frustratie op met het gebrek aan het snel importeren van afbeeldingen in React.


Antwoord 10

De beste aanpak is om de afbeelding in het js-bestand te importeren en te gebruiken. Het toevoegen van afbeeldingen in de openbare map heeft een aantal nadelen:

  • Bestanden in de openbare map worden niet verkleind of nabewerkt,

  • Je kunt geen gehashte naam gebruiken (moet worden ingesteld in webpack-configuratie) voor afbeeldingen, als je dat wel doet, moet je de namen keer op keer veranderen,

  • Kan bestanden niet vinden tijdens runtime (compilatie), resulteren in 404-fout aan clientzijde.


Antwoord 11

we hebben base64 niet nodig, geef gewoon het pad en de afmetingen van je afbeelding op zoals hieronder weergegeven.

logo importeren van ‘./Logo.png’ //lokaal pad

       var doc=new jsPDF("p", "mm", "a4");
        var img = new Image();
        img.src =Logo;
        doc.addImage(img, 'png', 10, 78, 12, 15)

Other episodes