feat: add image import - Githubissues

tjosepo commented 2 years ago

Hi! I'm interested in Packup and would love to see this project grow, so I made this PR.

Changes:

When using serve or build, an image declared inside a of a <img> element will be imported.
Added an image import to examples/with-simple-assets/index.html and examples/with-imports/index.html.
Added tests.

Example:

<html>
  <head>
  </head>
  <body>
    <h1>Hey!</h1>
-   <img src="images/my_image.png">
+   <img src="index.e64db08d87e7ea59f8a01df1dcbb9de5.png">
</body></html>

A new image file is created. The orignal image src will be replaced by the new image filename.

Todos:

Documentation
Add a file-loader plugin to Esbuild to be able to import images from JavaScript (import url from './image.png";).

Feedback is welcomed 🙂

tjosepo commented 2 years ago

By the way, the image I used for testing is the Deno logo.

tjosepo commented 2 years ago

Just realized I forgot about the srcset attribute and the <picture> element. I'm considering adding them in a separate PR.

kt3k commented 2 years ago

published as 0.1.11

kt3k / packup

feat: add image import #33