#StackBounty: #javascript #reactjs #gatsby #gatsby-image #react-dom-server Injecting gatsby-image into html, which was created from mar…

Bounty: 50

I’m trying to inject some images into my pages created from markdown. I’m trying to do this using ReactDomServer.renderToString()

const componentCreatedFromMarkdown = ({data}) => {
    useEffect(() => {
        const injectDivs = Array.from(document.getElementsByClassName('injectDivs'))
        injectDivs.forEach((aDiv) => {
            aDiv.innerHTML = ReactDOMServer.renderToString(<MyComponent args={myArgs} />)

MyComponent looks like this

<a className={args.className} href={args.link}>
            maxWidth: args.maxWidth,
            maxHeight: '100%',
            backgroundPosition: "center 25%"

The img is showing as a black box, if I right click the image I can open it in a new tab.

enter image description here

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.