CODEWITHSUNDEEP
webpack
user13275549
user13275549

Reputation:

Webpack url image won't show in dev-server localhost

Hope this will be a quick fix.

Goal: I want to add images through url in scss and after successful compilation see them in dev-server localhost.

Problem: I can set absolute path and webpack gives me no errors, images i included through url successfully go through file-loader and into '../dist' folder under '/assets/images/'. When after "npm run dev" compilation i run dev-server to open up a localhost i can successfully make live changes to html, scss and js and it renders without problems, now, only problem is that something about images is incorrect and thus images are not shown.

I tried many solutions to change path in different way, in compiled 'main.css' the image path is the same i typed in scss but it misses './' to have a correct path. Unfortunately when i try to add dot in front of url image address i get compilation error. I am stuck with this problem, would really appreciate any help given.

I included several screenshots:

https://i.sstatic.net/5AfzQ.png [Webpack configuration]

https://i.sstatic.net/loWQ8.png [file-loader]

https://i.sstatic.net/CErdq.png [home.scss]

https://i.sstatic.net/qJfLz.png [index.js]

https://i.sstatic.net/6E1jt.png [compiled html and file structure on the left]

https://i.sstatic.net/IPupt.png [localhost with some errors]

https://i.sstatic.net/eZwSZ.png [asset structure]

Upvotes: 1

Views: 1053

Answers (2)

Manolo de la Vega
Manolo de la Vega

Reputation: 323

I had the same issue, with a webApp generated by JHipster

I resolved it by adding in the proxy.conf.js file the url pattern where my images are stored ( '/photo' item in the 'context' line below )

function setupProxy({ tls }) {
  const conf = [
    {
      context: ['/api', '/services', '/management', '/auth', '/health', '/photo'],
      target: `http${tls ? 's' : ''}://localhost:8080`,
      secure: false,
      changeOrigin: tls,
    },
  ];
  return conf;
}

module.exports = setupProxy;

Upvotes: 0

user13275549
user13275549

Reputation:

Figured out myself, i had to point out a correct address in webpack.config.js file and thus my configuration for file-loader is now:

        {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
              outputPath: 'assets/images/',
              name: '[name].[ext]',
              url: true,
              publicPath: './assets/images/',
            }
        },

Upvotes: 1

Related Questions