At some point you might want to add an image to a val—in your README, HTML/JSX, or elsewhere. There are four ways to host images in Val Town:
- Drag and drop images into our markdown editor to auto-upload
- Store images in our blob storage
- Host images elsewhere and link from vals
- Store SVGs in vals as files
Drag and drop
Section titled “Drag and drop”While editing markdown in a val, you can drag and drop image files in the editor.
You’ll see a toast message while the image is uploading and when it completes. It’ll automatically insert the image with its storage URL, like so:
Once your image has been uploaded, you can use its storage URL to link to it elsewhere (we just ask that you limit auto-uploads to reasonable use within Val Town and don’t abuse it as a storage service).
Blob storage
Section titled “Blob storage”Vals come with built-in blob storage through our standard library. Keeping images in blob storage can be handy because you’ll have a centralized view of all your images (and JSON, text, binary, etc.) in Val Town settings.
Check out this blob_admin val for an example of both using and managing your images.
Host elsewhere
Section titled “Host elsewhere”If you already use a service like Amazon S3 or Cloudflare R2 for image hosting, no need to change course. Copy-paste your image’s source URL in your val’s markdown, HTML, JSX, or wherever you’re using images.
SVGs can be stored as text files in your vals. You can import the serveFile util from our standard library to serve your SVG file (like this val does, for example).
You can of course include SVGs directly in your markup as HTML or JSX, too.