Creé mi primera aplicación React completa y funciona maravillosamente. Cargo mi servidor de desarrollo y todo se carga exactamente como esperaba. En particular, mis archivos de imagen se cargan perfectamente.
Un ejemplo de una carga de imagen exitosa en mi servidor de desarrollo:
<img src='./img/sq/filename.jpg' />Cuando ejecuto el servidor de desarrollo, cuando inspecciono este elemento en la consola y voy a 'Fuentes', veo el árbol de archivos así:
- localhost:3333 - css [folder] - js [folder] - img/sq [folder] - filename.jpg - index [file]Esto es como yo esperaría.
Sin embargo, cuando se ejecuta el servidor de producción , la imagen no se carga. Cuando inspecciono el elemento y voy a 'Fuentes', esto es lo que veo en su lugar:
- localhost:3000 - static [folder] - css [folder] - js [folder] - index [file] Entonces, mi compilación de producción aparentemente ignora la carpeta /img/sq por completo.
Escuché sobre el cargador de archivos y el cargador de URL, pero aún no he encontrado una explicación clara y simple de lo que hacen y cómo usarlos. Instalé ambas dependencias con éxito y agregué este cargador a mi archivo 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' ] }Después de hacer esto, no estoy seguro de cómo se supone que esto cambie la forma en que se cargan las imágenes. ¿Debo cambiar la forma en que se hace referencia a la imagen? Cualquier ayuda / sugerencia sería enormemente apreciada, ya que esto me tiene perplejo.
ACTUALIZAR:
Este es mi archivo server.js. No puedo ver ninguna diferencia radical entre el código que publicaste y el mío, excepto que yo uso el método res.render , para tu res.sendFile .
¿Hay algo que me haya perdido aquí?
servidor.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}]`); });Te recomiendo que uses la 'Crear aplicación React' como esqueleto.
https://github.com/facebookincubator/create-react-app
Puede agregar una imagen al App.js que se crea para probar si la imagen se carga en sus servidores de desarrollo y producción.
nuestra clase de aplicación con la imagen agregada debería verse así:
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> ); } }Como ejemplo, puede cargar con éxito una imagen con el servidor node.js con este código (archivo index.js) y la carpeta de compilación con el código de reacción
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);Para resumir los pasos son:
npm run build para crear la carpeta de compilación con la imagen en ellaUse el código node.js para crear un servidor (use el código anterior) y coloque su carpeta de compilación (creada en el paso anterior) junto a su código de nodo index.js. Observación: debe instalar los módulos 'express' 'path' y luego ejecutar el código node.js de su servidor.
npm install express --save
npm install path --save
node index.js
Navegue a localhost:9000 para ver su aplicación con la imagen en ella.
Estos pasos deberían ayudarlo a resolver su problema, ya que es un ejemplo de cómo compilar código de reacción para usarlo en producción y ver la imagen en un entorno de producción.