Chargement de fichiers image en production - Réagissez

Question

J'ai construit ma première application React complète, et elle fonctionne à merveille. Je charge mon dev-server et tout se charge exactement comme je l'espère. Notamment, mes fichiers d'image se chargent parfaitement.

Un exemple d'une charge d'image réussie sur mon serveur dev:

<img src='./img/sq/filename.jpg' /> 

Lors de l'exécution du serveur dev, quand je visite cet élément dans la console et aller aux « sources », je vois le fichier arbre comme ceci:

- localhost:3333 
    - css [folder] 
    - js [folder] 
    - img/sq [folder] 
    - filename.jpg 
    - index [file] 

C'est que je me attends.

Toutefois, lors de l'exécution du serveur de production , l'image ne se charge pas. Quand j'inspecte l'élément, et aller aux « sources », ce que je vois à la place:

- localhost:3000 
    - static [folder] 
    - css [folder] 
    - js [folder] 
    - index [file] 

Donc, ma version de production est apparemment le dossier en ignorant /img/sq tout à fait.

J'ai entendu parler de chargeur de fichiers et d'url-loader, mais je n'ai pas encore trouvé une explication claire et simple de ce qu'ils font et comment les utiliser. J'ai installé à la fois à mes dépendances avec succès, et j'ai ajouté ce chargeur à mon dossier webpack.config.js:

{ 
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loaders: [ 
    'file?hash=sha512&digest=hex&name=[hash].[ext]', 
    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
    ] 
} 

Après avoir fait cela, je ne sais pas comment cela est censé changer la façon les images se chargent. Dois-je changer la façon dont l'image est référencée? Toute aide/pointeurs serait massivement apprécié, car cela m'a bloqué.

---

MISE À JOUR:

Ceci est mon fichier server.js. Je ne vois pas de différence radicale entre le code que vous avez publié et le mien, sauf pour moi en utilisant la méthode res.render, à votre res.sendFile.

Y at-il quelque chose que j'ai peut-être manqué ici?

server.js

var express = require('express') 
var app = express(); 


app.use('/static', express.static(__dirname + '/static')); 


app.set('views', __dirname + '/views'); 
app.set('view engine', 'ejs'); 


app.get('*', function (req, res) { 
    res.render("index"); 
}); 


const port = process.env.PORT || 3000; 
const env = process.env.NODE_ENV || 'production'; 
app.listen(port, err => { 
    if (err) { 
    return console.error(err); 
    } 
    console.info(`Server running on http://localhost:${port} [${env}]`); 
}); 

Answer 1

Je vous recommande l'utilisation de 'Créer React App' comme un squelette.

https://github.com/facebookincubator/create-react-app

Vous pouvez ajouter une image à la app.js qui est créé pour tester si les charges d'image dans vos serveurs de développement et de production.

notre classe d'applications avec l'image ajoutée devrait ressembler à ceci:

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 

     <img src='./img/sq/filename.jpg' /> 
     </div> 
    ); 
    } 
} 

À titre d'exemple, vous pouvez charger avec succès une image avec le serveur Node.js avec ce code (index de fichiers.js) et le dossier de construction avec REACT Code

const express = require('express'); 
const path = require('path'); 
const app = express(); 

app.use(express.static('./build')); 

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

app.listen(9000); 

Pour résumer les étapes sont les suivantes:

1. Utilisez le 'Créer React App' pour créer un squelette pour votre application
2. Ajouter une seule image dans le code de rendu (utilisez le code ci-dessus)
3. Exécutez npm run build pour créer le dossier de construction avec l'image

4. Utilisez le code node.js pour créer un serveur (utilisez le code ci-dessus) et placez votre dossier de compilation (créé à l'étape précédente) en regard de votre code de noeud index.js. Remarque: vous devez installer les modules 'express' 'path', puis exécuter le code de votre serveur node.js.

   npm install express --save

   npm install path --save

   node index.js

5. Accédez à localhost:9000 pour voir votre application avec l'image en elle.

Ces étapes devraient vous aider à résoudre votre problème car il est un exemple de la façon de construire le code réagir à utiliser dans la production et voir l'image dans un environnement de production.