Form control for image linking and uploading.






Customizing the preview

By default, the preview is shown in the same element as the input. There are two ways to customize this: using the preview slot, or the preview attribute.

You can set the preview attribute to none for no preview:

<img-input preview="none"></img-input>

You can also set it to a CSS selector pointing to another element:

<img-input preview="#preview"></img-input>
<img id="preview">

Alternatively, you can use the preview slot to provide your own <img> element:

  <img slot="preview">

Please note that if the preview attribute is set, the preview slot will be ignored.

The attribute can be dynamic as well:

<button onclick="this.previousElementSibling.preview =
  this.previousElementSibling.preview === 'none' ? '' : 'none'">
	Toggle preview

CSS parts



Just include the component's JS file and you're good:

<script src="https://nudeui.com/img-input/img-input.js" type="module"></script>

In case you want to link to local files: CSS is fetched automatically, and assumed to be in the same directory as the JS file.