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

209
Views
React & Webpack - ¿Cómo hacer pública la carpeta de imágenes locales y redirigir `src` de `img` a ella?

El contexto

Estoy trabajando en un proyecto de React en el que los estilos y las imágenes los proporciona un tema externo, ya que la aplicación React se integrará en un portlet dentro de esta página web. Como tal, las imágenes dentro de la aplicación React son relativas y apuntan a un directorio al que no tengo acceso durante el desarrollo.

<img src="/relative/external/theme/images/themeImg.png" />

Como no tengo acceso a él, cuando desarrollo localmente no puedo ver ninguna de esas imágenes. Sin embargo, para fines de desarrollo, tengo esos archivos de imagen localmente en mi directorio local src/js/images/ .

Estamos usando Webpack 4.

La configuración actual

Aquí dejo parte de la configuración actual (no puedo publicar todo):

 { name: 'main', mode: 'development', devtool: 'source-map', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, entry: { main: './src/main/js/main.js', }, module: { rules: [ { test: /\.(js|jsx)$/, resolve: { extensions: ['.js', '.jsx'] }, exclude: /node_modules/, loaders: ['babel-loader'], }, { test: /\.svg$/, use: [ { loader: 'svg-url-loader', }, ], }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'sass-loader', }, ], }, ], }, devServer: { contentBase: path.join(__dirname, 'dist'), port: 9000, historyApiFallback: true, headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS', 'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization', }, } }

La pregunta

¿Hay alguna manera de decirle a Webpack que haga público mi directorio src/js/images/ , de modo que sea accesible mediante los atributos HTML src y redirija todas las llamadas relative/external/theme/images a ese directorio público images/ en desarrollo? (sin meterse con publicPath , por lo que todo el paquete todavía se sirve desde el mismo lugar)?

No puedo importar imágenes y usarlas en el src ya que no puedo importarlas desde un directorio al que no tengo acceso, por eso toda la carpeta debe ser pública y estar disponible para cargar las imágenes desde ella.

about 4 years ago · Juan Pablo Isaza
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!