#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}>
    <Img
        style={{
            maxWidth: args.maxWidth,
            maxHeight: '100%',
            backgroundPosition: "center 25%"
        }}
        fluid={args.imgProps}
        backgroundColor={`#040e18`}
        objectFit="contain"
    ></Img>
</a>

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.