Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

184
Vistas
Webpack does not copy the images that i use into react components

hi i override the webpack of the create-react-app, in a separate override-webpack.ts file.

What i do is:

  • bundle the js files and copy them into build/static/js
  • bundle the css files and copy them into build/static/css
  • **copy the /assets/img folder and copy them into build/static/media

**NOT all the images from assets folder are copied.The ones that are used into react components, are ignored, like so: <img width="34 src={${url}/img/car.svg} alt="car" />

Context:

So all the js & css files are correctly bundled.
My issue is that the images(png,svg) from the src/assets/img are copied into build/static/media, are only the ones that are used into the scss files, and NOT from whithin my react components, these images are ignored, (as i show above), and that is what i looking for, how to include them also in the build folder

my override-webpack.ts is like this:.

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
}

Any suggestions why the images from inside the react components are not copied to the build/static/media is welcome.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The problem is, that you are not importing the used images in React but just linking to them. Try importing and using image files like so:

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

Now webpack should recognize the imports and write the files.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda