Markdown images are not turned into webpack requires

[jasononeil]

Using JSX <img src={}> tags allows you to import images using require statements and have them correctly handled by webpack, but using the markdown ![alt]({{src}}) syntax does not generate a require statement, so the assets aren't processed by webpack.

It would be good to support {{importedVariable}} interpolation in the markdown syntax too.

It would be even nicer (in my opinion at least) if images were automatically transformed into webpack requires.

Markdown to reproduce:

---
imports:
  myImg: ./img/img.png
---

- Image 1: ![img](./img/img.png)
- Image 2: ![img]({{myImg}})
- Image 3: <img src="./img/img.png" />
- Image 4: <img src={myImg} />
- Image 5: ![img]({{require('./img/img.png')}})
- Image 6: <img src={require('./img/img.png')} />

Actual output

import myImg from './img/img.png';
// ....snip....
      <li>Image 1: <img src="./img/img.png" alt="img" /></li>
      <li>Image 2: <img src="{myImg}" alt="img" /></li>
      <li>Image 3: <img src="./img/img.png" /></li>
      <li>Image 4: <img src={myImg} /></li>
      <li>Image 5: <img src="{require('./img/img.png')}" alt="img" /></li>
      <li>Image 6: <img src={require('./img/img.png')} /></li>
// ....snip....

Expected output

import myImg from './img/img.png';
// ....
      <li>Image 1: <img src="./img/img.png" alt="img" /></li>
      <li>Image 2: <img src={myImg} alt="img" /></li>
      <li>Image 3: <img src="./img/img.png" /></li>
      <li>Image 4: <img src={myImg} /></li>
      <li>Image 5: <img src={require('./img/img.png')} alt="img" /></li>
      <li>Image 6: <img src={require('./img/img.png')} /></li>
// ....

Thanks for the very cool webpack loader! I'd be open to creating a pull request if you can confirm which of the images in the example should be transformed into require statements

[ticky]

Ah, that’s an unfortunate gotcha, and I know why it’s happening - the interpolation is being set aside to be re-inserted, but what it’s replaced with gets quoted by the markdown processor.

I believe this is fixable, but for now, I’d just stick to using an <img> tag directly.