web-dev-qa-db-fra.com

React ne charge pas les images locales

Je construis une petite application de réaction et mes images locales ne se chargent pas. Des images comme placehold.it/200x200 se chargent. Je pensais que cela pourrait être quelque chose avec le serveur? La source complète sur github .

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');
});
javascriptreactjs
51
Petrba

Lorsque vous utilisez Webpack, vous devez require images pour que Webpack puisse les traiter, ce qui expliquerait pourquoi les images externes ne se chargent pas en interne. Par conséquent, au lieu de <img src={"/images/resto.png"} />, vous devez utiliser <img src={require('/images/image-name.png')} /> en remplaçant image-name.png par le nom d'image correct pour chaque image. d'eux. De cette façon, Webpack est en mesure de traiter et de remplacer la source img.

138
Thomas

Une autre façon de faire:

Commencez par 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 incorporés en tant qu'URL de données

Vous devez installer les deux modules: url-loader et file-loader

Enfin, vous pouvez faire:

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

Vous pouvez explorer ces chargeurs plus loin ici:

url-loader: https://www.npmjs.com/package/url-loader

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

22
fandro

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 document principal 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 paquet. Contrairement aux importations CSS, importer un fichier vous donne une valeur de chaîne. Cette valeur est le dernier chemin que vous pouvez référence dans votre code, par exemple. comme l'attribut src d'une image ou du href d'un lien vers un PDF.

Pour réduire le nombre de demandes adressées au serveur, importez des images qui are less than 10,000 octets renvoie un URI de données au lieu d'un chemin. Ce s'applique aux extensions de fichier suivantes: bmp, gif, jpg, jpeg et png ...

19
Hawkeye Parker

En fait, j'aimerais faire un commentaire, mais je ne suis pas encore autorisé. C'est pourquoi prétendre ê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" />;

J'aimerais continuer dans cette voie. Cela fonctionne bien quand on a une image on peut facilement insérer. Dans mon cas, c'est un peu plus complexe: je dois cartographier plusieurs images. Jusqu’à présent, la seule façon pratique de faire cela que j’ai trouvée est la suivante

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 à importer littéralement peut être énorme et le nombre de clés dans un objet. (Dans ce code, il est clairement fait référence aux noms, à ses clés) Dans mon cas, les procédures liées à la nécessité n’ont pas fonctionné - les chargeurs ont généré des erreurs de nature étrange lors de l’installation et ne présentaient aucune marque de travail; et exiger par lui-même n'a pas fonctionné non plus.

3
Kiszuriwalilibori

Moi aussi, j'aimerais ajouter aux réponses de Hawkeye Parker et de @Kiszuriwalilibori:

Comme indiqué dans la documentation ici , il est généralement préférable d'importer les images en fonction des besoins.

Cependant, j'avais besoin de nombreux fichiers à charger dynamiquement, ce qui m'a amené à placer les images dans le dossier public ( également indiqué dans le README ), en raison de la 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 la construction, tel que manifest.webmanifest.
  • Vous avez des 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 choix que de l'inclure en tant que balise.

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

2
vancy.pants

Cela devrait plutôt être un commentaire et non une réponse, mais je n’ai pas une réputation suffisante. C'est à propos de "besoin" solution. Cela fonctionne dans un environnement tel que décrit, mais est-ce un moyen de forcer la nécessité dans un fichier CSS joint ???

 #root {

  background-image: url(../images/books.jpg);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;

}

1
Kiszuriwalilibori

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

./assets/images/picture.jpg

au lieu de

../assets/images/picture.jpg
0
Kean Amaral

Essayez de changer le code dans server.js en -

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

La solution la plus efficace que j'ai trouvée était de définir l'image à l'aide de CSS

.profile_img {
   background-image: url('https://img.icons8.com/contacts.png');
}

Vous pouvez fournir à votre jsx un nom de classe similaire

 <Icon className="profile_img" />

Dans la déclaration du composant, vous pouvez simplement le faire

const Icon = () => {
   return(
     <img src='' alt='profileicon'/>
   )
}
0
John Nyingi

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

Outre la réponse acceptée, vous pouvez vous simplifier la vie en spécifiant un chemin alias dans Webpack. Ainsi, vous n'avez pas à vous soucier de l'emplacement de l'image par rapport au fichier dans lequel vous vous trouvez. Voir l'exemple au dessous de:

Fichier Webpack: 

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

Utilisation: 

<img src={require("public/img/resto.ong")} />
0
adamj
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 d'images doit être situé à la racine de votre site. Exemple: http://www.example.com/images/resto.png

0
zdrsoft