I solved with code...

1. Utility Function to Convert Relative URLs to Absolute URLs You can create a utility function that takes the HTML string and a base URL, and then replaces all relative URLs with absolute URLs.

function convertRelativeToAbsolute(html, baseUrl) {
  // Create a DOM parser to parse the HTML string
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');

  // Get all the image elements
  const images = doc.querySelectorAll('img');

  // Replace the src attribute for each image
  images.forEach(img => {
    const src = img.getAttribute('src');

    // If the src is relative, convert it to absolute
    if (src && !src.startsWith('http')) {
      img.setAttribute('src', new URL(src, baseUrl).toString());
    }
  });

  // Serialize the document back to a string
  return doc.documentElement.outerHTML;
}

Once you have the utility function, you can use it within your React component to render the HTML with the updated image URLs.

import React from 'react';

const HtmlContent = ({ htmlString, baseUrl }) => {
  const absoluteHtml = convertRelativeToAbsolute(htmlString, baseUrl);

  return <div dangerouslySetInnerHTML={{ __html: absoluteHtml }} />;
};

export default HtmlContent;

You can now use this component in your React application by passing the HTML string and the base URL:

const htmlString = `
  <div>
    <img src="/images/pic1.jpg" alt="Pic 1" />
    <img src="images/pic2.jpg" alt="Pic 2" />
  </div>
`;

const baseUrl = 'https://www.example.com';

function App() {
  return (
    <div className="App">
      <HtmlContent htmlString={htmlString} baseUrl={baseUrl} />
    </div>
  );
}

export default App;

Explanation

convertRelativeToAbsolute(html, baseUrl): This function parses the HTML string, finds all tags, and converts any relative src attributes to absolute URLs using the provided baseUrl. dangerouslySetInnerHTML: This is a React prop used to set HTML content. It’s called "dangerous" because it can expose your app to cross-site scripting (XSS) attacks if you’re not careful with the content you pass to it. Ensure that the HTML content you’re rendering is sanitized if it comes from an untrusted source. With this approach, you’ll be able to convert relative image URLs to absolute URLs in your React application.