Having trouble showing images from block content using PortableText?

It's been quite a while now that I've been stuck on this issue. Despite being in a learning phase, I find myself unable to progress due to this specific problem.

While links and text elements are functioning properly, I have encountered difficulties displaying images. No matter what approach I take, nothing seems to work.

I am currently working on a standard project generated from here

import markdownStyles from "./markdown-styles.module.css";
import { PortableText } from "@portabletext/react";


export default function PostBody({ content }) {
  return (
    <div className="max-w-2xl mx-auto" className={markdownStyles.markdown}>
      <PortableText value={content} />
    </div>
  );
}

The output I'm getting from the content includes images as well. I attempted integrating a custom component, but unfortunately, it did not yield the desired results.


// Image blocks and content

Answer №1

If you want to display images from your portable text, you'll need to create the URL for those images using utilities offered by Sanity: Sanity image url-builder and optionally Sanity asset utils for image dimensions, etc.

After setting up these tools following the documentation, you can customize how you show your content by using the components prop of the PortableText component (essentially styling the output as desired). More information on this can be found here.

While querying for images in Sanity documents, you typically won't need the url-builder since you can query directly for the asset's URL. However, if you're querying for images added in a rich text editor, Sanity does not provide the asset URL, so you'll have to generate it yourself.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to present information retrieved from REST API, despite data being provided by the server

I'm attempting to make a REST call using a token in the header to retrieve information. To include the required header token, my code is structured as follows within my restClient.js, app.js, and users.js files. //restClient.js import { jsonServerR ...

What is the best way to secure every page in NextJS and Supabase by implementing password protection with the help of the Supabase default auth helpers and UI

I'm on a quest to implement user authentication across all pages in my NextJS project, specifically focusing on pages instead of the entire app. I found a useful tutorial that aligns with my goals - . However, I've hit a roadblock when it comes t ...

Executing MySQL queries using Ajax

Having trouble with a registration form that relies on jQuery and Ajax for validation. The issue arises when the server-side validation of the e-mail address, among other things, fails to return a result through $msg. function checkUser () { $search = ...

How to form an array using rxjs before the adding sequence is completed

I am currently exploring a way to utilize rxjs to achieve the following scenario: You have two observables, onAddObs and onRemoveObs. Assume that onAddObs.next() is triggered multiple times, adding "A", "B", "C". I aim to then extract ["A", "B", "C"]. .t ...

Unable to retrieve the value from the selected radio button

Below is the provided HTML: <form> <div class="form-group"> <div class="checkbox-detailed male_input"> <input type="radio" name="gender" id="male" value="male"> <label for="male"> ...

Tips for clearing express-session during a logout process in a Node.js application

Currently, we utilize express-session to store data in our Node application. For instance, we set user information like this: req.session.userinfo = userObj; Could you advise on the best practice for clearing session information during logout? We apprecia ...

Is there a way to set the starting position of the overflow scroll to the middle?

Is there a way to have the overflow-x scrollbar scroll position start in the middle rather than on the left side? Currently, it always begins at the left side. Here is what it looks like now: https://i.stack.imgur.com/NN5Ty.png If anyone knows of a soluti ...

Display the div only when the time variable reaches zero

I want to display a div when the difference between the time imported from the database and the current time is 0. How can I achieve this? Here is the code snippet: while ($row = mysqli_fetch_array($result)) { echo "<div class='alert' id= ...

Is it not possible to change node labels in D3.js after clicking on a node?

After being inspired by this link, I successfully created a basic network visualization app using D3.js. The app reads node names from a textarea on an HTML page and then constructs a network where all nodes are interconnected. All the relevant code can ...

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

Unlock the power of JavaScript and jQuery by utilizing inner functions

Here's some JavaScript and jQuery code with an ajax request included. Can you solve the mystery of why success1() can be called, but not this.success2()? Any ideas on how to fix this issue? function myFunction() { this.url = "www.example.com/ajax ...

Position the vertical bar directly adjacent to the form input field

Looking for assistance with creating a unique webpage layout that includes a form where the employee ID is visually separated from the rest of the content by a vertical bar extending across the entire page. However, my attempts to achieve this using a gr ...

Interactive form control for location details including country, state, district, and town

I am struggling with adding dynamic form controls on dropdown change. I have been able to add them, but encountered an error preventing me from retrieving the value in 'formName.value'. The specific error message states: "Error: There is no Form ...

Ensuring the screen reader shifts focus to the previous element

Utilizing the screen reader to redirect focus back to the previous element has proven to be a challenge for me. After clicking the Return button, it will vanish and the Submit button will take its place. If the Submit button is then clicked, it disappears ...

The rendering of the Angular 2 D3 tree is not functioning properly

Attempting to transition a tree created with d3 (v3) in vanilla JavaScript into an Angular2 component has been challenging for me. The issue lies in displaying it correctly within the component. Below is the code snippet from tree.component.ts: import { ...

Typescript causing issues with Material-UI theme.mixins.toolbar functionality

Currently, I am utilizing Material-UI to develop a React and Typescript website. The experience has been positive overall, but I am facing a specific issue. I have been trying to implement one of the code examples from their documentation, but unfortunatel ...

Guide on using POST method in jQuery version 1.11.4 for tab functionality

I'm currently in the process of upgrading from jquery ui version 1.9.2 to jquery ui version 1.11.4 and I've encountered a situation where ajaxOptions has been removed from the tabs control. Originally, I was using the following code: $("#tabs"). ...

"Effortlessly incorporate a new contact with Material UI's latest simple dialog

I've been exploring the material-ui next branch and using a specific example as a guide to create a dialog. For more information, you can check out the example here: You can also view the code sandbox here: https://codesandbox.io/s/7rq8nl11x I&apos ...

Enhance your React application by using a personalized hook that allows you to trigger a function

After creating a custom hook to handle uploads to an AWS S3 bucket, I encountered a small issue. Rather than having the hook execute the logic directly, I decided to create an executable function to return instead. However, I am facing a problem where the ...

Enhancing React Functionality: Increasing React State Following an If Statement

Whenever I click on the start/stop button, it triggers the handlePlay function. This function then proceeds to initiate the playBeat function. In an ideal scenario, the play beat function should continuously display 1222122212221222... until I press the st ...