Comment dois-je faire référence à une image locale de Réagir?

Comment puis-je charger une image à partir du répertoire local et de l'inclure dans reactjs img src tag?

J'ai une image appelée one.jpeg à l'intérieur du même dossier que mon composant et j'ai essayé les deux <img src="one.jpeg" /> et <img src={"one.jpeg"} /> à l'intérieur de mon renderfonction, mais l'image ne s'affiche pas. Aussi, je n'ai pas accès à webpack config fichier depuis le projet est créé avec l'officiel create-react-app ligne de commande util.

Mise à jour: Cela fonctionne si j'ai d'abord importer l'image avec import img from './one.jpeg' et de l'utiliser à l'intérieur img src={img}, mais j'ai tellement de nombreux fichiers image à l'importation et, par conséquent, je veux les utiliser dans la forme, img src={'image_name.jpeg'}.

Double Possible de Réagir à ne pas charger les images locales
Voir aussi stackoverflow.com/questions/37644265/...

OriginalL'auteur Zip | 2016-10-12

reactjs

83

Tout d'abord envelopper la src dans le {}

Ensuite si l'aide Webpack;
Au lieu de:
<img src={"./logo.jpeg"} />

Vous pouvez avoir besoin d'utiliser exiger:

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

Une autre option serait d'abord importer l'image en tant que telle:

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

ou ...

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

puis de le brancher...

<img src={logo} />

Je recommande cette option, surtout si vous êtes à la réutilisation de l'image source.

Prendre soin de ne pas oublier le . au début de l'url relative. Devrait être <img src={require('./one.jpeg')} />

OriginalL'auteur Apswak

La meilleure façon est d'importer l'image d'abord et ensuite de l'utiliser.

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>
    );
  }
}

Pourquoi est-il la meilleure solution?
C'est le meilleur moyen si vous avez besoin de réutiliser dans un même composant, vous pouvez l'utiliser sans le chemin d'accès de référence. C'est une bonne pratique @JasonLeach

OriginalL'auteur Arslan shakoor

4

Vous avez besoin pour vous envelopper source de l'image dans le {}
```
<img src={'path/to/one.jpeg'} />
```
Vous devez utiliser require si vous utilisez webpack
```
<img src={require('path/to/one.jpeg')} />
```
OriginalL'auteur Shubham Khatri

le meilleur moyen pour importer l'image est...

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>
    );
  }
}

OriginalL'auteur Abdul Moiz

1

Ma réponse est globalement très similaire à celle de Rubzen. J'utilise l'image comme la valeur de l'objet, btw.
Deux versions de travail pour moi:
```
{
"name": "Silver Card",
"logo": require('./golden-card.png'),
```
ou
```
const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,
```
Sans couverture - mais c'est différent de l'application, trop.

J'ai vérifié aussi "importation" de la solution et, dans quelques cas, il fonctionne (ce qui n'est pas surprenant, qui est appliqué dans le modèle App.js à Réagir), mais pas dans les cas comme le mien ci-dessus.

OriginalL'auteur Kiszuriwalilibori

import image from './img/one.jpg';

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

OriginalL'auteur Emyboy

J'ai utilisé de cette façon, et ça marche... j'espère que vous utile.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);

OriginalL'auteur Rubzen

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}/>
   );
  }
}

à l'exportation de l'Image par défaut

OriginalL'auteur LOVENEET SINGH

Vous devez vous connecter pour publier un commentaire.