Image path dev vs production build directory

[henry-martinez]

Hi I'm still getting used to webpack and the workflow so I'm not sure if it's an issue or if i'm going about it the wrong way. I'd like to have a dev image path url and a different url path when i go to build for the production server.

For example: While DEV'ing (npm start):

<img src="./img/logo.png" alt="">

and BUILD (npm run build):

<img src="/angular/dist/img/logo.png" alt="">

Now, i've successfully updated the publicPath to properly build the css and js paths:

    config.output = isTestEnv ? {} : {
        path: root('dist'),
        publicPath: ENV === 'build' ? '/angular/dist/' : '',
        ...
    };

Unfortunately my image paths remain the same when i go to build so they don't display.

Am I missing something here?

Thanks, for any help.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/37383336-image-path-dev-vs-production-build-directory?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

[cmelion]

Hmm, I'll have to think about that.

[henry-martinez]

So i'm not sure if it's the most elegant approach but i used string replacement (a solutions i used with gulp in the past) as a workaround.

Using this webpack module: https://github.com/jamesandersen/string-replace-webpack-plugin

and i added the following after the config.module block (in the webpack.config.js):

  if(ENV === 'build') {

    config.module.loaders.push(
      {
        test: /\.(html|scss)$/,
        loader: StringReplacePlugin.replace({
          replacements: [
            {
              pattern: /src="\.\/img\//ig,
              replacement: function (match, p1, offset, string) {
                return 'src="/angular/dist/img/';
              }
            },
            {
              pattern: /url\('\.\/img\//ig,
              replacement: function (match, p1, offset, string) {
                return "url('/angular/dist/img/";
              }
            }
          ]})
      }
    );
  }

[cmelion]

@henry-martinez would you be interested in doing a PR?

[henry-martinez]

@cmelion unfortunately i'm up to my neck with projects and wouldn't be able to find the time anytime soon.