title: How do I require an image in Pug using Webpack
body: <p>I have the following config for my pug files...</p>
  
  <pre><code>{
      test: /\.pug$/,
      loaders: ["pug-html"]
  }
  </code></pre>
  
  <p>This works great now I want to add an image that I load using url-loader. My structure is like this</p>
  
  <pre><code>src
    ...
      thing
        thing.template.pug
        thing.png
  </code></pre>
  
  <p>And I want to include the png so in the pug file I add...</p>
  
  <p>img(src="thing.png")</p>
  
  <p>This doesn't resolve so I tried things like <code>img(src=require("thing.png"))</code>. None of these work. I tried adding the html-loader like this...</p>
  
  <pre><code> {
        test: /\.pug$/,
        loaders: ["html?interpolate=require&amp;-minimize", "pug-html"]
   },
  </code></pre>
  
  <p>but then I get...</p>
  
  <pre><code>Module not found: Error: Cannot resolve directory './\"thing.png\"' in .../src/.../thing
   @ ./src/.../thing/thing.template.pug 1:128-164
  </code></pre>
  
  <p>This all works fine in my stylus with...</p>
  
  <pre><code>    {
        test: /.*[^\.global]\.styl$/,
        loaders: ["to-string", "css", "stylus"]
      },
  </code></pre>
  
  <p>I also tried...</p>
  
  <pre><code>img(src=statesmall.png)
  </code></pre>
  
  <p>and get <code>Cannot read property 'png' of undefined</code></p>
  
  <p>Also if I comment that line out with the html in there I see...</p>
  
  <pre><code>"Template parse errors:
  Unexpected closing tag "div" ("module.exports = "&lt;div&gt;&lt;h1&gt;Hey&lt;/h1&gt;&lt;div class=\"terminal-output\"&gt;this thing&lt;/div&gt;[ERROR -&gt;]&lt;/div&gt;";"): TerminalComponent@0:97"
  </code></pre>
  
  <p>How do I require an image in pug?</p>