Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

179
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda