Skip to content
Get help on SlackWatch Sanity demo

Troubleshooting URL builder add-on for background images in inline CSS

16 replies
Last updated: Jul 28, 2020
I'm just wondering if this url builder add-on only works for <image src=[] or can it also be used to place the url inside a background image inline css?
Jul 28, 2020, 3:25 PM
It looks to me like you have forgot to wrap the url in 
url()
?
Jul 28, 2020, 3:25 PM
ahdamnit!
Jul 28, 2020, 3:26 PM
i think your right
Jul 28, 2020, 3:26 PM
lol
Jul 28, 2020, 3:26 PM
even so it still doesnt workl
Jul 28, 2020, 3:31 PM
this is what i get: 
url(options{project-id:5qjt9zfj;dataset:production;source{asset{_ref:image-3896734…-2250x1500-png;}}}with-options:function withOptions(options) { var baseUrl = options.baseUrl || this.options.baseUrl; var newOptions = { baseUrl:baseUrl }; for (var key in options) { if (options.hasOwnProperty(key)) { var specKey = rewriteSpecName(key); newOptions[specKey] = options[key]; } } return new ImageUrlBuilder(this,_extends({ baseUrl:baseUrl },newOptions)); };
Jul 28, 2020, 3:32 PM
and that is with the exact code I placed inside the src
Jul 28, 2020, 3:33 PM
that works fine
Jul 28, 2020, 3:33 PM
I was curious and did som quick testing, I got it working.
Don't know what your 
imageUrl
& 
buildImageObj
are returning, and can't say why src is working and not the inline css.
Jul 28, 2020, 3:46 PM
ok, cool. that's all i wanted to know. thank you
Jul 28, 2020, 3:47 PM
i'll figure it out
Jul 28, 2020, 3:47 PM
const builder = imageUrlBuilder(config);
const urlFor = (source: string) => builder.image(source);

const Image: React.FunctionComponent<Props> = ({source, alt}) => {
    const url = source?._id && urlFor(source._id).width(1152).auto('format').url();

    if (url === null) {
        return null;
    }
    
    return (
        <figure
            css={css`
                background-image: url(${url});
                width: 500px;
                height: 500px;
            `}
        />
    );

    // return <Img src={url} alt={alt} />;
};

Jul 28, 2020, 3:49 PM
Sorry for the ugly code, but just try to get the url as a string from one of your functions as I did I think you should got it working
Jul 28, 2020, 3:50 PM
great! thank you
Jul 28, 2020, 3:50 PM
i see what i was doing wrong. i wasn't calling the url() function at the end. although it didn't matter when building the image (for some reason) it did matter when applying it to the background image
Jul 28, 2020, 7:40 PM
thank you for your help!
Jul 28, 2020, 7:41 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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 startedWatch demo

Was this answer helpful?

Categorized in