πŸ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Discussion about troubleshooting image display in Sanity.io using Portable Text and Tailwind CSS.

27 replies
Last updated: Sep 14, 2022
So, my rich text is showing up on my posts but my images are not - I'm using the plain old blockContent image...? Any help as to what I'm missing here?
Sep 9, 2022, 12:26 AM
Can you log
value
to see what it is?
Sep 9, 2022, 6:27 AM
Yes, console.log the value and then
*also*: Are you using next or basic react?

*And*: Have you fully defined your builder? I do it like this:

import createImageUrlBuilder from '@sanity/image-url'
import { sanityConfig } from './config'

export const imageBuilder = createImageUrlBuilder(sanityConfig)

export const urlForImage = (source) =>
  imageBuilder.image(source).auto('format').fit('max') // but I mostly use next-sanity-image 
Sep 9, 2022, 12:57 PM
Here is my image builder?
const builder = imageUrlBuilder(client);

export function urlFor(source: SanityImageSource) {
  return builder.image(source);
}
Sep 9, 2022, 1:09 PM
I'm using Remix
Sep 9, 2022, 1:30 PM
could you also log value and see if any other errors or warnings exist?
Sep 9, 2022, 3:22 PM
user J
Sep 9, 2022, 3:33 PM
user J
Sep 9, 2022, 3:37 PM
could you show us your imports as well, I am now unsure, why you use the
urlBuilder
when you have
urlFor()
setup with your client, since you don’t use your
client
in
PostImage
.
Sep 9, 2022, 3:40 PM
You are getting the right value
Sep 9, 2022, 3:40 PM
Sure thing:
Sep 9, 2022, 3:40 PM
I'm only using urlBuilder because that's what the example has? Should I be using urlFor() here and if so, how? haha
Sep 9, 2022, 3:41 PM
Replacing urlBuilder with urlFor works!
Sep 9, 2022, 3:43 PM
BUT
Sep 9, 2022, 3:43 PM
yeah, so the image builder needs access to your client, since it gets the referenced data from within your dataset doc.Your screenshots are nice, but also really limiting, because we cannot see your code, btw. so a bit more would go a long way
πŸ™‚

What I would do btw: define
urlFor()
where you defined your
client
(like i did here in my
lib/sanity.js
) and which you did here as well .Then import it where you define your portable text component and us this with
urlFor(value)
(or try also
urlFor(value.asset)
if the first does not work… )
Sep 9, 2022, 3:50 PM
import { PortableText } from "@portabletext/react";
import { getImageDimensions } from "@sanity/asset-utils";
import { urlFor } from "~/lib/sanity/sanity";

const SampleImageComponent = ({ value }) => {
  const { width, height } = getImageDimensions(value);
  return (
    <img
      className="flex w-3xl"
      src={urlFor().image(value).auto("format").url()}
      alt={value.alt || " "}
      loading="lazy"
    />
  );
};

export const myPortableTextComponents = {
  types: {
    image: SampleImageComponent,
  },
Here is my entire code?
Sep 9, 2022, 3:54 PM
I've been sending screenshots so that the errors can be seen
Sep 9, 2022, 3:54 PM
yeah but without the code as a whole, this is only a small info πŸ™‚ its not criticism but an implicit ask for more and bigger screenshots. Your last messages were exactly what I was looking for!
Sep 9, 2022, 5:08 PM
user J
Well, I cannot thank you enough for your help - That was the hardest thing I've encountered while working with Sanity. Now to figure out how to style each and every output from the rich text editor!
Sep 9, 2022, 5:27 PM
No problem πŸ™‚
This might help you, while i reproduce your issue and get back at you ….
Sep 9, 2022, 5:48 PM
Oh wait did it work? Your last message sounds like it πŸ™‚
Sep 9, 2022, 5:48 PM
Do you use Tailwind btw? There is some extra functionality around that.
Sep 9, 2022, 5:50 PM
It works!! Thank you πŸ™‚ I saw Geoff mention Proseable text, and tried to incorporate it initially....
But now that I have portable text working, do I just add this Proseable text component to my myPortableTextCompnents file?
Sep 9, 2022, 7:37 PM
Or is proseabletext just extra? Because Tailwind is working for me with Portable Text
Sep 9, 2022, 7:41 PM
It would be a different approach I guess. I tend to work within s simple dyi setup like you made work now, but I think it would depend on the scope of your websites and what you like. I will look into proseable text next week to check it there is any other pros or cons but I always tend to try both early on and see what fits best.
πŸ˜… I once rewrote a whole project 3 times (Google MUI, another themplate, SASS +framer and then pivoted to tailwind) but now I know what I like...Plus I'be learnt a lot.
Better to try in the beginning then redo the whole thing is what I mean to say
Sep 11, 2022, 8:19 PM
Alright had a look into prosable text: so basically it is only taking the portable text + tailwind combo another direction: if you want to define, how padding, margins, and everything that is kind of default in PT by your Tailwind setup, you can go the extra way. I never saw the need for myself, but I bet some people really have the need to customise everything the PT gives.
Sep 13, 2022, 10:28 AM
Nice, thank you - I'm finding normal portable text easily editable with Tailwind, so I don't think I'll risk trying to add proseable text into the mix! Thanks again for all your help.
Sep 13, 2022, 10:00 PM
I think so too, love PT once I figured it out it was a game changer πŸ™‚ this is how I found sanity some years ago πŸ™‚
Sep 14, 2022, 9:52 AM

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.

Was this answer helpful?