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

javascript onload button is selected

I am looking to create a button on page load for my login page in Chrome. I want the login button to be preselected when the page loads, and when I press Enter, the onclick function of the button should be triggered. Any advice on how to achieve this? Th ...

Exploring the inheritance of directives and controllers within AngularJS

I'm struggling to grasp the concept of inheriting a parent controller from a directive. In my setup, I have a simple example with a controller named MainCrtl. This controller is responsible for creating and removing an array of directives called inner ...

It seems that the memoization feature in Redux's createSelector is not functioning properly

I've been diving into the documentation for createSelector and it seems like its purpose is to cache results in order to avoid repeated expensive computations. However, I am noticing that my console.logs are being triggered in functions where they sho ...

show various commands and outcomes of the getElementsByClassName() function

Can someone help me figure out how to use the "getElementsByClassName() Method" in JavaScript to change or display different colors? I am trying to change the background color to blue for the class "ex" and red for the class "example", but it's not wo ...

What is the best way to condense all JavaScript and CSS files in MEAN.JS for a production setting?

I recently finished creating a basic MEAN.JS application. When using MEAN.JS, I can use the command grunt build to minify the js and css files located in specific folders: css: [ 'public/modules/**/css/*.css' ], js: [ 'public/config ...

Issue encountered when working with Next Auth and TypeScript: The argument type 'string | undefined' cannot be assigned to the parameter type 'string | Buffer'

Encountering a TypeScript error that states: "Argument of type 'string | undefined' is not assignable to parameter of type 'string | Buffer'." An attempt to integrate NextAuth into a Next.js 14 application and configure logi ...

Numerous Customized Google Maps

On my contact page , I have a Google Map V3 that is styled and mostly functional, except for some sprite image display issues. Now, I need to include the same JSON data in two separate maps on my showrooms page . How can I style multiple maps with differen ...

React Burger Navigation

As I embark on my journey with React, I find myself in the process of understanding various concepts. One particular concept that has caught my attention is adding a hamburger menu component. While I have successfully added the component itself, I am encou ...

Having trouble with $addToSet and $push not working in updates using Mongoose with MongoDB in Node.js?

My issue involves Mongoose as I am attempting to update a document in MongoDB using the mongoose module. Below is my schema: var User = new mongoose.Schema({ name: String, email: String, list_houses: [{ id_house: S ...

"Have you ever wondered how the router object in express.js is seamlessly integrated with app.use(), considering that it only accepts

I am curious about the process of how the router object in express.js is passed to app.use(), which typically only accepts callbacks. Since router is an object of express, I am trying to understand why app.use() does not throw an error even though it req ...

Refresh Next.js on Navigation

Is there a way to trigger a reload when clicking on a Link component from next/link? I attempted to create my own function within the child div of the link that would reload upon click. However, it seems to reload before the route changes and is not succ ...

Node.js seems to be frozen following the "npm run dev" command

Just recently, I updated to the newest versions of React and Next.js. After creating a new project using npx create-next-app, the first step I take in VS Code is running "npm run dev". However, I encountered a warning that Fast Refresh had to perform a ful ...

Is there a way to delay loading 'div' until a few seconds after the 'body' has been fully loaded?

Is there a way to delay the appearance of the "text-container" div after the image is displayed? I have attempted to achieve this using JavaScript with the following code: <script> window.onload = function(){ var timer = setTimeout("showText()",700 ...

Alert: The route "/D:/original/22-02-2017/job2.html" specified in [react-router] does not correspond to any existing routes

I am currently working on a project using TypeScript with React. I'm utilizing webpack as a compiler, and my directory structure looks like this: d:/original/22-02-2017/ - In my web.config.js file, the entry point is set to ./src/index.tsx. All ...

Does the AJAX load more feature duplicate the existing data?

I've successfully implemented a PHP code that generates JSON data from WordPress posts in the database. By using AJAX, I'm able to load this JSON on my HTML page without any issues. Now, I want to enhance this functionality by adding a "Load Mo ...

Does an href and click events both happen simultaneously?

JavaScript Purpose: Implement a series of loops and create anchor links with the 'href' attribute <a class="mui-control-item" v-for="(item, index) in dai" v-on:click ="abc(item)" :href="'#item'+(index+1)+ 'mobile'" ...

The 404 error message was encountered when attempting to fetch the Ajax

I am experimenting with using Ajax to load all images from a local folder onto my HTML page. The code I am referring to comes from this question. I am running the files on a (Tomcat 8.5) server in Eclipse and opening the URL in Google Chrome. However, when ...

The integration of socket.io with static file routing in node.js is encountering issues

I am currently developing a chat application and I have encountered an issue. When the static file routing is functioning correctly, the socket.io for the chat feature throws a "not found" error in the console. http://localhost/socket.io/?EIO=3&tran ...

Encountering a 500 Internal Server Error when deploying a Next.js application with MongoDB and Mongoose on Vercel

My application is functioning properly on localhost. However, when I deploy it to Vercel through GitHub, I encounter errors. The building logs show the following: Cloning github.com/sayinmehmet47/electronic-products47 (Branch: main, Commit: 2ae970b) Cloni ...

What is the best way to transfer information between two React.js files?

I am currently finding it inefficient to pass data from App.js to another .js file within React by constantly reading and writing from local storage. I would prefer to only retrieve data from local storage once when the App.js component mounts. App.js: ...