Hoe verwijs ik naar een lokale afbeelding in React?

Hoe kan ik een afbeelding laden uit de lokale map en deze opnemen in de tag reactjs img src?

Ik heb een afbeelding met de naam one.jpegin dezelfde map als mijn component en ik heb zowel <img src="one.jpeg" />als <img src={"one.jpeg"} />in mijn renderfunctie, maar de afbeelding verschijnt niet. Ik heb ook geen toegang tot het bestand webpack configomdat het project is gemaakt met het officiële create-react-app-opdrachtregelprogramma.

Update: dit werkt als ik eerst de afbeelding importeer met import img from './one.jpeg'en deze gebruik in img src={img}, maar Ik moet zoveel afbeeldingsbestanden importeren en daarom wil ik ze gebruiken in de vorm img src={'image_name.jpeg'}.


Antwoord 1, autoriteit 100%

Verpak eerst de src in {}

Als u Webpack gebruikt;
In plaats van:
<img src={"./logo.jpeg"} />

Mogelijk moet u het volgende gebruiken:

<img src={require('./logo.jpeg')} />


Een andere optie is om eerst de afbeelding als zodanig te importeren:

import logo from './logo.jpeg'; // with import

of …

const logo = require('./logo.jpeg); // with require

plug hem dan in…

<img src={logo} />

Ik raad deze optie aan, vooral als je de afbeeldingsbron hergebruikt.


Antwoord 2, autoriteit 21%

De beste manier is om eerst de afbeelding te importeren en daarna te gebruiken.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 

Antwoord 3, autoriteit 6%

Maak in de map publiceen map assetsen plaats het afbeeldingspad dienovereenkomstig.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

Antwoord 4, autoriteit 3%

U moet uw afbeeldingsbronpad in {}

plaatsen

<img src={'path/to/one.jpeg'} />

U moet requiregebruiken als u webpack

gebruikt

<img src={require('path/to/one.jpeg')} />

Antwoord 5

de beste manier om een ​​afbeelding te importeren is…

import React, { Component } from 'react';
// image import
import CartIcon from '../images/CartIcon.png';
 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

Antwoord 6

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

Antwoord 7

zet je afbeeldingen in de openbare map of maak een submap in je openbare map en plaats je afbeeldingen daar.
bijvoorbeeld:

  1. je plaatst “completative-reptile.jpg” in de openbare map, dan heb je er toegang toe als
src={'/completative-reptile.jpg'}
  1. je plaatst completative-reptile.jpgop public/static/images, dan heb je er toegang toe als
src={'/static/images/completative-reptile.jpg'}

Antwoord 8

Ik heb een andere manier gevonden om dit te implementeren (dit is een functionele component):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

Hopelijk helpt het!


Antwoord 9

Je kunt dit op twee manieren doen.

Eerste

Importeer de afbeelding bovenaan de klas en verwijs ernaar in je <img/>-element op deze manier

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';
export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
} 

Antwoord 10

Stap 1: import MyIcon from './img/icon.png'

stap 2:

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>    

Antwoord 11

u moet vereisen en . standaard

<img src={require('./logo.jpeg').default} />

Antwoord 12

Mijn antwoord lijkt in principe erg op dat van Rubzen. Ik gebruik de afbeelding als de objectwaarde, btw.
Twee versies werken voor mij:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

of

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

Zonder wrappers – maar dat is ook een andere toepassing.

Ik heb ook de “import”-oplossing aangevinkt en in enkele gevallen werkt het (wat niet verwonderlijk is, dat wordt toegepast in patroon App.js in React), maar niet in het geval zoals de mijne hierboven.


Antwoord 13

Voor mensen die meerdere afbeeldingen willen gebruiken, is het natuurlijk een probleem om ze één voor één te importeren. De oplossing is om de map afbeeldingen naar de openbare map te verplaatsen. Dus als je een afbeelding had op public/images/logo.jpg, zou je die afbeelding op deze manier kunnen weergeven:

function Header() {
  return (
    <div>
      <img src="images/logo.jpg" alt="logo"/>
    </div>
  );
}

Ja, het is niet nodig om /public/ in de bron te gebruiken.

Lees verder: https://daveceddia.com/react-image-tag/.


Antwoord 14

Ik heb deze manier gebruikt en het werkt… Ik hoop dat je er iets aan hebt.

const logofooter = require('../../project-files/images/logo.png');
 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

Antwoord 15

import React from "react";   
import image from './img/one.jpg';
class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

standaardafbeelding exporteren


Antwoord 16

Zoals sommigen in de opmerkingen vermeldden, kunt u de afbeeldingen in de openbare map plaatsen. Dit wordt ook uitgelegd in de documenten van Create-React-App: https ://create-react-app.dev/docs/using-the-public-folder/


Antwoord 17

logo importeren uit ‘./logo.jpeg’; // met import

plug hem dan in…

Dat is het.


Antwoord 18

Je zou een bestand kunnen maken met de naam bijvoorbeeld images.js en daar naar al je app-bronnen verwijzen, en later die component importeren in al je andere componenten waar je afbeeldingen zou moeten weergeven


Antwoord 19

import image from './img/one.jpg';
class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

LEAVE A REPLY

Please enter your comment!
Please enter your name here

19 + eleven =

Other episodes