Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Image Uploaded to WYSIWYG - Link Provided on the Sanity CDN Doesn't Work

26 replies
Last updated: Jul 19, 2022
Heyo!
We have out blog on a react website using Sanity (and it all works very nicely) but when we include an image in the WYSIWYG the image link provided on the Sanity CDN doesn't work. Has anyone experienced this before?
Jul 18, 2022, 1:44 PM
What does “doesn’t work” mean in that context?
Jul 18, 2022, 1:57 PM
Sorry, that was vague!
I mean it provides a link to an image for the img tag to load, but when you navigate to/try to load that image it says not found.
Its as if the image isn't hosted at all
Jul 18, 2022, 2:00 PM
What does the link look like?
Jul 18, 2022, 2:20 PM
Sorry for taking so long!

https://cdn.sanity.io/images/undefined/undefined/b75288070171082c939875ddf983fac43c42dce4-800x800.jpg?w=800&fit=max&auto=format

So I've been digging in all afternoon and my theory is its sanity url builder issue, because its returning undefined/undefined as above
Jul 18, 2022, 2:59 PM
Right, right. Where did you get that URL please? 🙂
Jul 18, 2022, 3:02 PM
From the image that fails to load on the post itself.
So I've tried a few things this afternoon, and hoping one of them can help tell you what my issue is haha!


So when I don't use urlBuilder from sanity/image-url it shows as error saying I need to import the image component into the PortableText component as a prop.

So I create an image component, and use the url builder example from the sanity website and it give undefined/undefined


This is where I am copying from

https://www.sanity.io/docs/portable-text-to-react#available-components
Jul 18, 2022, 3:09 PM
Can you show me both your query and the JSX for your image please?
Jul 18, 2022, 3:14 PM
Image component:

import { PortableText } from "@portabletext/react";
import urlBuilder from "@sanity/image-url";
import { getImageDimensions } from "@sanity/asset-utils";

// Barebones lazy-loaded image component
const BlogImage = ({ value, isInline }) => {
  const { width, height } = getImageDimensions(value);
  console.log(urlBuilder());
  return (
    <>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={urlBuilder()
          .image(value)
          .width(isInline ? 100 : 800)
          .fit("max")
          .auto("format")
          .url()}
        alt={value.alt || " "}
        loading="lazy"
        style={{
          // Display alongside text if image appears inside a block text span
          display: isInline ? "inline-block" : "block",

          //   // Avoid jumping around with aspect-ratio CSS property
          //   aspectRatio: width / height,
        }}
      />
    </>
  );
};

export default BlogImage;
Jul 18, 2022, 3:21 PM
PortableText component usage:

<PortableText
              value={post.body}
              components={{
                types: {
                  image: BlogImage,
                },
              }}
            />
Jul 18, 2022, 3:21 PM
Ah.
Jul 18, 2022, 3:22 PM
I got it.
Jul 18, 2022, 3:22 PM
You don’t pass your project/dataset to the URL builder.
Jul 18, 2022, 3:22 PM
Which is why you get undefined/undefined.
Jul 18, 2022, 3:22 PM
Oh my word
Jul 18, 2022, 3:23 PM
lets try this
Jul 18, 2022, 3:23 PM
thank you!
Jul 18, 2022, 3:23 PM
😊
Jul 18, 2022, 3:25 PM
Sorry... I know this is probably obvious but I'm going stir crazy, where do I find the details for my sanity config?
Jul 18, 2022, 3:28 PM
In your sanity.json typically?
Jul 18, 2022, 3:30 PM
Yeah I was being epically dumb, the heat is getting to me
Jul 18, 2022, 3:32 PM
I found it as you messaged lol
Jul 18, 2022, 3:32 PM
You're a hero Kitty, got it working
Jul 18, 2022, 3:33 PM
thank you!
Jul 18, 2022, 3:33 PM
Awww, glad to help!
Jul 18, 2022, 3:44 PM
Very instructive thread!
Jul 19, 2022, 11:47 PM

Sanity– build remarkable experiences at scale

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

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing