Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

178
Views
Webpack no copia las imágenes que uso en los componentes de reacción

hola, anulo el paquete web de create-react-app, en un archivo override-webpack.ts separado.

lo que hago es:

  • empaque los archivos js y cópielos en build/static/js
  • empaque los archivos css y cópielos en build/static/css
  • **copie la carpeta /assets/img y cópielos en build/static/media

** NO se copian todas las imágenes de la carpeta de assets . Las que se usan en los componentes de reacción se ignoran, así: <img width="34 src={${url}/img/car.svg} alt="car" />

Contexto:

Entonces, todos los archivos js y css están agrupados correctamente.
Mi problema es que las imágenes (png, svg) de src/assets/img se copian en build/static/media , son solo las que se usan en los archivos scss , y NO desde dentro de mis componentes de reacción, estas imágenes son ignorado ( como muestro arriba ), y eso es lo que busco, cómo incluirlos también en la carpeta de compilación

mi override-webpack.ts es así: .

 var configurator = { paths(paths) { // paths }, webpack(config, env) { //if stage, prod, dev bundleSass() addMedia() overrideOutput() return config; } } module.exports = configurator; // overrride the publicPath of the bundles, so to have it into index.html function overrideOutput(config) { config.output.filename = 'static/js/[name].[hash:8].js'; config.output.chunkFilename = 'static/js/[name].[hash:8].chunk.js'; config.output.publicPath = `http://www.something.com/`; // this is added into index.html } // copy images to build/static folder, i was hoping to copy the fonts as well but it does not.. // this functionality ONLY copies the images that are called into the css files, // it IGNORES the images that used into react components, // like: // <img width="34 src={`${url}/img/user.svg`} alt="user" /> function addMedia(config){ const media = { test: /\.(woff(2)?|ttf|eot|svg|png)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'static/media', // by default it creates a media folder } } ] }; config.module.rules.push( media ); // push the rule to the module array } // bundle scss files function bundleSass(config) { // add rule for the sass-loader, so to bundle the scss files }

Cualquier sugerencia de por qué las imágenes del interior de los componentes de reacción no se copian en la build/static/media es bienvenida.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

El problema es que no estás importando las imágenes usadas en React, sino que solo estás vinculándolas. Intente importar y usar archivos de imagen así:

 import CarImage from '../../img/car.svg'; // further down in the component <img width="34 src={CarImage} alt="car" />

Ahora el paquete web debería reconocer las importaciones y escribir los archivos.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!