React ne chargera pas les images locales

Je suis en train de créer une petite application de réaction et mes images locales ne se chargeront pas. Des images comme des placehold.it/200x200charges. Je pensais que ça pouvait être quelque chose avec le serveur?

Voici mon App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

et server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

Lors de l' utilisation Webpack vous devez requireimages pour que Webpack de les traiter, ce qui expliquerait pourquoi les images externes charge tout interne ne sont pas, donc au lieu de <img src={"/images/resto.png"} />vous devez utiliser le <img src={require('/images/image-name.png')} />remplacement de l' image-name.png avec le nom de l' image correcte pour chacun d'eux. De cette façon, Webpack est capable de traiter et de remplacer l'img source.

J'ai commencé à créer mon application avec create-react-app (voir l'onglet "Créer une nouvelle application"). Le fichier README.md qui l'accompagne donne cet exemple:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

Cela a parfaitement fonctionné pour moi. Voici un lien vers le master doc pour ce README , qui explique (extrait):

... Vous pouvez importer un fichier directement dans un module JavaScript. Cela indique à Webpack d'inclure ce fichier dans le bundle. Contrairement aux importations CSS, l'importation d'un fichier vous donne une valeur de chaîne. Cette valeur est le chemin final que vous pouvez référencer dans votre code, par exemple comme l'attribut src d'une image ou le href d'un lien vers un PDF.

Pour réduire le nombre de requêtes adressées au serveur, l'importation d'images de moins de 10 000 octets renvoie un URI de données au lieu d'un chemin. Cela s'applique aux extensions de fichiers suivantes: bmp, gif, jpg, jpeg et png ...

Une autre façon de faire:

Tout d' abord, installer ces modules: url-loader,file-loader

Utilisation de npm: npm install --save-dev url-loader file-loader

Ensuite, ajoutez ceci à votre configuration Webpack:

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit: Limite d'octets aux fichiers en ligne en tant qu'URL de données

Vous devez installer les deux modules: url-loaderetfile-loader

Enfin, vous pouvez faire:

<img src={require('./my-path/images/my-image.png')}/>

Vous pouvez étudier ces chargeurs plus en détail ici:

chargeur d'url: https://www.npmjs.com/package/url-loader

chargeur de fichiers: https://www.npmjs.com/package/file-loader

En fait, je voudrais faire un commentaire, mais je ne suis pas encore autorisé. C'est pourquoi cela prétend être la prochaine réponse alors que ce n'est pas le cas.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
// Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

Je voudrais continuer sur cette voie. Cela fonctionne bien quand on a une image, on peut simplement insérer. Dans mon cas, c'est un peu plus complexe: je dois mapper plusieurs images dessus. Jusqu'à présent, le seul moyen viable de le faire que j'ai trouvé est le suivant

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

Alors, ma question est de savoir s'il existe des moyens plus simples de traiter ces images? Inutile de dire que dans un cas plus général, le nombre de fichiers qui doivent être littéralement importés peut être énorme et le nombre de clés dans l'objet également. (L'objet dans ce code est clairement impliqué pour faire référence par les noms - ses clés) Dans mon cas, les procédures liées aux exigences n'ont pas fonctionné - les chargeurs ont généré des erreurs de nature étrange lors de l'installation et n'ont montré aucune marque de fonctionnement; et exiger en soi n'a pas non plus fonctionné.

Je voulais juste laisser ce qui suit qui améliore la réponse acceptée ci-dessus.

En plus de la réponse acceptée, vous pouvez vous simplifier la vie un peu en spécifiant un aliaschemin dans Webpack, vous n'avez donc pas à vous soucier de l'emplacement de l'image par rapport au fichier dans lequel vous vous trouvez actuellement. Veuillez voir l'exemple ci-dessous :

Fichier Webpack:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

Utilisation:

<img src={require("public/img/resto.ong")} />

Je voudrais moi aussi ajouter aux réponses de @Hawkeye Parker et @Kiszuriwalilibori:

Comme indiqué dans la documentation ici , il est généralement préférable d'importer les images au besoin.

Cependant, j'avais besoin de nombreux fichiers à charger dynamiquement, ce qui m'a conduit à mettre les images dans le dossier public ( également indiqué dans le README ), à cause de cette recommandation ci-dessous de la documentation:

Normalement, nous vous recommandons d'importer des feuilles de style, des images et des polices à partir de JavaScript. Le dossier public est utile comme solution de contournement pour un certain nombre de cas moins courants:

• Vous avez besoin d'un fichier avec un nom spécifique dans la sortie de génération, tel que manifest.webmanifest.
• Vous disposez de milliers d'images et devez référencer dynamiquement leurs chemins.
• Vous souhaitez inclure un petit script tel que pace.js en dehors du code fourni.
• Certaines bibliothèques peuvent être incompatibles avec Webpack et vous n'avez pas d'autre option que de les inclure comme balise.

J'espère que cela aide quelqu'un d'autre! Laissez-moi un commentaire si j'ai besoin de clarifier quelque chose.

Je développe un projet qui utilise SSR et maintenant je souhaite partager ma solution basée sur quelques réponses ici.

Mon objectif est de précharger une image pour l'afficher lorsque la connexion Internet est hors ligne. (Ce n'est peut-être pas la meilleure pratique, mais comme cela fonctionne pour moi, c'est ok pour l'instant) Pour info, j'utilise également ReactHooks dans ce projet.

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

Pour utiliser l'image, je l'écris comme ça

<img src="/assets/images/error-review-failed.jpg" />

Essayez de changer le code dans server.js en -

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));

Parfois, vous pouvez entrer à la place de l'emplacement de votre image / src: essayez

./assets/images/picture.jpg

au lieu de

../assets/images/picture.jpg

src={"/images/resto.png"}

L'utilisation de l'attribut src de cette manière signifie que votre image sera chargée à partir du chemin absolu "/images/resto.png" de votre site. Le répertoire des images doit être situé à la racine de votre site. Exemple: http://www.example.com/images/resto.png

Voici ce qui a fonctionné pour moi. Tout d'abord, comprenons le problème. Vous ne pouvez pas utiliser une variable comme argument à exiger. Webpack a besoin de savoir quels fichiers regrouper au moment de la compilation.

Quand j'ai eu l'erreur, j'ai pensé que cela pouvait être lié à un problème de chemin comme en absolu vs relatif. J'ai donc passé une valeur codée en dur pour exiger comme ci-dessous: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Cela fonctionnait bien. Mais dans mon cas, la valeur est une variable provenant des accessoires. J'ai essayé de passer une variable littérale de chaîne comme certains l'ont suggéré. Cela n'a pas fonctionné. J'ai également essayé de définir une méthode locale en utilisant le cas de commutation pour les 10 valeurs (je savais que ce n'était pas la meilleure solution, mais je voulais juste que cela fonctionne d'une manière ou d'une autre). Cela aussi n'a pas fonctionné. Ensuite, j'ai appris que nous ne pouvons PAS passer de variable au require.

Pour contourner le problème, j'ai modifié les données du fichier data.json pour les limiter au nom de mon image. Ce nom d'image qui provient des accessoires en tant que littéral String. Je l'ai concaténé à la valeur codée en dur, comme ceci:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

La valeur réelle contenue dans le logo proviendrait du fichier data.json et ferait référence à un nom d'image tel que photosnap.svg.

La meilleure façon de charger des images locales dans react est la suivante

Par exemple, conservez toutes vos images (ou tout élément tel que des vidéos, des polices) dans le dossier public comme indiqué ci-dessous.

Écrivez simplement <img src='/assets/images/Call.svg' />pour accéder à l'image Call.svg à partir de l'un de vos composants react

Remarque: conserver vos ressources dans un dossier public garantit que vous pouvez y accéder de n'importe où à partir du projet, en donnant simplement '/ path_to_image' et sans avoir besoin de traverser le chemin '../../' comme ceci

vous devez d'abord importer l'image puis l'utiliser. Cela a fonctionné pour moi.

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}