Alt Text for Images in Custom Components

[nicolle]

I’m using Builder.io and the Next.js Image component, and I’ve run into an issue with alt text.

Context:
When uploading images to Builder.io’s library, there’s an option to set an Alt Image text, as shown in the image below.

However, when using an image input in a registered component we have something like this:

{
  name: 'image',
  type: 'file',
  allowedFileTypes: ['jpeg', 'png'],
}

The received value is just a string (image URL), meaning the alt text is not included. Since Next.js requires an alt prop for images, I have to manually add an extra field:

{
  name: 'altText',
  type: 'string',
}

This means every image component requires an alt text field, making the process repetitive and error-prone.

Question:

Is there a way to automatically pull the Alt Image text defined in Builder.io’s media library, instead of manually adding an altText field for every image instance?

[sheema]

Hey @nicolle , welcome to the Builder forum!

You don’t need to manually add the altText for every image instance. Here is an example of a custom component I have created that displays the Alt text of an image based on what is added to the asset library-

import React from 'react';

interface ImageUploaderProps{
    altText?: string
}
function ImageUploader({altText=""}:ImageUploaderProps){
  return (
    <div >
        <h1>{altText}</h1>
    </div>
   
  );
}

export default ImageUploader;

This is the registration code for this component -

Builder.registerComponent(ImageUploader, {
  name: "ImageUploader",
  inputs: [
    {
      name: "imageUrl",
      type: "file",
      allowedFileTypes: ["jpeg", "jpg", "png", "gif"],
      helperText: "Upload an image file (jpeg, jpg, png, gif).",
    },
     
  ],
});

Here is a loom for a better understanding of how to fetch the altText value from the asset library.
This is a very simple example, feel free to customize it for your use-case.