Skip to content
Get help on Slack

Using @sanity/image-url without a framework or build process

14 replies
Last updated: Mar 7, 2023
if I am not using a framework & don’t have any 
build
process, can I still use @sanity/image-url ? How do I use it? The instructions say to “pass it your configured sanityClient” but I don’t know how/where that’s supposed to happen? Sorry for the basic question
Mar 6, 2023, 11:39 PM
How are you building your frontend?
Mar 7, 2023, 12:12 AM
Vanilla html/css/js
Mar 7, 2023, 12:32 AM
You’ll use the JS client you linked to create a configured client. You’ll need to use a bundler like Browserify or Webpack to be able to use modules, though. If you don’t want to do that, you won’t be able to use the url builder and you’ll have to use the HTTP API to get content from Sanity.
Mar 7, 2023, 12:37 AM
Yeah, I guess that's what I've been doing this whole time...I just don't know the nomenclature.
Mar 7, 2023, 12:39 AM
Mar 7, 2023, 12:40 AM
The plugin was recommended to me, could you look at the thread and suggest another route?
Mar 7, 2023, 12:40 AM
Yeah, you can instead expand the reference in your query and get the url of the image in the CDN.
*[_type == 'collection' && title == "${collectionName}"] {
  'products': products[].product->,  
  'sets': sets[].set->{
   ...,
   'imageUrl': image.asset->.url
  }
}
Mar 7, 2023, 12:45 AM
you are so wonderful
Mar 7, 2023, 12:45 AM
You can then concatenate these params onto that url to present the image at the size/resolution/etc. you want.
Mar 7, 2023, 12:46 AM
Aw, thank you! Happy to help!
Mar 7, 2023, 12:46 AM
you made my monday better
Mar 7, 2023, 12:46 AM
💜
Mar 7, 2023, 12:47 AM
You saying that has made my monday better!
Mar 7, 2023, 12:47 AM
My coworker pointed out this morning that you actually can use those packages without a bundler because the most recent release of the client added Browser ESM CDN support . I’m afraid I can’t be much more helpful than that since I haven’t given it a go yet!
Mar 7, 2023, 4:50 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?