Possible Img Require() problem?

[Axion741]

I'm trying to narrow down why my images are breaking when parsed.

The HTML string to be parsed is this;
<img src={require("./img/articles/2019/1/react.png")}></img>

Which is then parsed into this;
<img src="{require("./img/articles/2019/1/react.png")}">
Resulting in a broken Image.

For testing I hardcoded an Image in below with this;
<img src={require("./img/articles/2019/1/react.png")}/>
And it loads just fine.

Any thoughts?

[remarkablemark]

Hi @Axion741, are you properly using template literals (template strings) here?

// regular string
'<img src={require("./img/articles/2019/1/react.png")}></img>';

// template string
`<img src="${require("./img/articles/2019/1/react.png")}">`

The regular string will stringify the require statement whereas the string template will interpolate the require value.

Also, like you shown in your last example, the img tag is a void element so it should be self-closing:

// good
<img src="file.png">
<img src="file.png" />

// bad
<img src="file.png"></img>

If I'm misunderstanding your issue, could you please reproduce it in a CodeSandbox?

[Axion741]

Well now I'm at even more of a loss.
With the fixed template strings, my HTML parses perfectly in the sandbox, but the image is still broken for me in my app.
The rest of the HTML pops out fine, but the Img tag still parses to this;
<img src="${require('./img/articles/2019/1/react.png')}">
Instead of interpolating the require.

[remarkablemark]

Sorry for missing your last comment @Axion741. Were you able to resolve your issue?

[remarkablemark]

Closing issue due to inactivity. Feel free to reopen if there are any new updates.