Import images

[ghost]

How can I import images? Since it uses snowpack I was expecting something like this to work out of the box (taken from the official docs):

import imgReference from './image.png'; // img === '/src/image.png'
<img src={imgReference} />;

neither this worked (same image inside public/ and src/img/ folders):

// Trying get relative from public/ (root)
<img src="/image.png" alt="" />
<img src="./image.png" alt="" />
// Trying get relative from src/
<img src="/images/image.png" alt="" />
<img src="../images/image.png" alt="" />

[ghost]

Oh, img in JS isn't supported yet? (ref: #65)

Putting the image inside the public/ folder and trying <img src="./image.png" alt="" /> doesn't work either, but the request hits 200 and the response content is Image from http://localhost:8888/image.png.

[natemoo-re]

Thanks for raising this, I'm thinking I'm not handling the Content-Type header properly in Microsite's proxy dev server. Will get this fixed for v1.1.0!

[ghost]

I'm pretty sure that this fragment is responsible for this behavior:

microsite/packages/microsite/src/cli/microsite-dev.ts

Lines 236 to 240 in 4c13da4

	if (req.url.indexOf("/web_modules/microsite") === -1) {
	result.contents = result.contents
	.toString()
	.replace(/preact\/hooks/, "microsite/client/hooks");
	}

Anything that doesn't match req.url.indexOf("/web_modules/microsite") === -1 will have its contents replaced by a new string.

[ghost]

I created this variable to exclude some types const MIME_EXCLUDE = ["image", "font"];.

And then added this condition:

if (
      req.url.indexOf("/web_modules/microsite") === -1 &&
      !MIME_EXCLUDE.includes(result.contentType.split("/")[0])
    ) {
   ...
}

and now it loads assets as expected.

---

Just a side note: I'm building my site, I set out to find any SSG built on top of snowpack that would fit my needs. Found SveletKit and microsite, but they are still young, so I'm building it in another mature framework and copying and pasting in projects with these young frameworks to see what sticks and what doesn't. :)

microsite looks promising, looking forward to it!

[natemoo-re]

Thanks so much for tracking down the issue and for giving Microsite a shot in general!

It is definitely young—I appreciate all the interest and am really looking forward to stabilizing things!