title: NextJs App is not loading image in nextjs public folder when deployed in Azure Web App
body: <p>Images like png are successfully displayed on app if locally run <code>next build</code> + <code>next start</code> but after deploying it to Azure Web App via server.js and a web.config, images are not loading anymore.</p>
  <p>I have my image under <code>public/imgs/logo.png</code>
  and I reference it like this:
  <code>&lt;Image src={'/imgs/logo.png'} height={'20px'} width={'180px'} /&gt;</code></p>
  <p>I even tried running the <code>server.js</code> directly(<code>node server.js</code>) once everything is built and the image still loads. But once I upload the build files(.next folder), web.config, and server.js in my Azure Web App, the image is not loading anymore.</p>
  <p>Please help. Below are some of the files I used to set this up.</p>
  <p>server.js</p>
  <pre><code>const { createServer } = require(&quot;http&quot;);
  // const express = require('express') (Only if you app uses express)
  const next = require(&quot;next&quot;);
  
  const port = process.env.PORT || 8888;
  const isDev = process.env.ENV !== &quot;production&quot;;
  const app = next({ isDev });
  const handle = app.getRequestHandler();
  
  app.prepare().then(() =&gt; {
    createServer((req, res) =&gt; {
      handle(req, res);
    }).listen(port, (err) =&gt; {
      if (err) throw err;
      console.log(`Ready on http://localhost:${port}`);
    });
  });
  </code></pre>
  <p>web.config</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;!--
       This configuration file is required if iisnode is used to run node processes behind
       IIS or IIS Express.  For more information, visit:
  
       &lt;https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config&gt;
  --&gt;
  
  &lt;configuration&gt;
    &lt;system.webServer&gt;
      &lt;!-- Visit &lt;http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx&gt; for more information on WebSocket support --&gt;
      &lt;webSocket enabled=&quot;false&quot; /&gt;
      &lt;handlers&gt;
        &lt;!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module --&gt;
        &lt;add name=&quot;iisnode&quot; path=&quot;server.js&quot; verb=&quot;*&quot; modules=&quot;iisnode&quot;/&gt;
      &lt;/handlers&gt;
      &lt;rewrite&gt;
        &lt;rules&gt;
          &lt;!-- Do not interfere with requests for node-inspector debugging --&gt;
          &lt;rule name=&quot;NodeInspector&quot; patternSyntax=&quot;ECMAScript&quot; stopProcessing=&quot;true&quot;&gt;
            &lt;match url=&quot;^server.js\\/debug[\\/]?&quot; /&gt;
          &lt;/rule&gt;
  
          &lt;!-- First we consider whether the incoming URL matches a physical file in the /public folder --&gt;
          &lt;rule name=&quot;StaticContent&quot;&gt;
            &lt;action type=&quot;Rewrite&quot; url=&quot;public{REQUEST_URI}&quot;/&gt;
          &lt;/rule&gt;
  
          &lt;!-- All other URLs are mapped to the node.js site entry point --&gt;
          &lt;rule name=&quot;DynamicContent&quot;&gt;
            &lt;conditions&gt;
              &lt;add input=&quot;{REQUEST_FILENAME}&quot; matchType=&quot;IsFile&quot; negate=&quot;True&quot;/&gt;
            &lt;/conditions&gt;
            &lt;action type=&quot;Rewrite&quot; url=&quot;server.js&quot;/&gt;
          &lt;/rule&gt;
        &lt;/rules&gt;
      &lt;/rewrite&gt;
  
      &lt;!-- 'bin' directory has no special meaning in node.js and apps can be placed in it --&gt;
      &lt;security&gt;
        &lt;requestFiltering&gt;
          &lt;hiddenSegments&gt;
            &lt;remove segment=&quot;bin&quot;/&gt;
          &lt;/hiddenSegments&gt;
        &lt;/requestFiltering&gt;
      &lt;/security&gt;
  
      &lt;!-- Make sure error responses are left untouched --&gt;
      &lt;httpErrors existingResponse=&quot;PassThrough&quot; /&gt;
  
      &lt;!--
        You can control how Node is hosted within IIS using the following options:
          * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
          * node_env: will be propagated to node as NODE_ENV environment variable
          * debuggingEnabled - controls whether the built-in debugger is enabled
  
        See &lt;https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config&gt; for a full list of options
      --&gt;
      &lt;iisnode watchedFiles=&quot;web.config;*.js&quot;/&gt;
    &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  <p>next.config.js</p>
  <pre><code>const path = require(&quot;path&quot;);
  require(&quot;dotenv&quot;).config();
  const withImages = require(&quot;next-images&quot;);
  
  module.exports = withImages({
    reactStrictMode: true,
    eslint: {
      dirs: [&quot;apiclients&quot;, &quot;common&quot;, &quot;components&quot;, &quot;config&quot;, &quot;pages&quot;, &quot;stores&quot;],
    },
    sassOptions: {
      includePaths: [
        path.join(__dirname, &quot;styles&quot;),
        path.join(__dirname, &quot;components&quot;),
      ],
      prependData: `@import &quot;styles/_variables&quot;;`, // prepend _css variables in all css documents
    },
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) =&gt; {
      config.plugins.push(new webpack.EnvironmentPlugin(process.env));
      return config;
    },
    experiments: {
      asset: true,
    },
  });
  </code></pre>