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.io – build remarkable experiences at scale

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