require an image in React

Question

in my React code this return true:

console.log(`${person.image}` === "../images/profile/mehraboon.jpg");

and this works:

return (
    <section>{<img src={require("../images/profile/mehraboon.jpg")} alt="person" />}</section>
  );

but this does not work:

return (
    <section>{<img src={require(`${person.image}`)} alt="person" />}</section>
  );

why?

Answer 1

Here

console.log(`${person.image}` === "../images/profile/mehraboon.jpg");

person.image is not equivalent to image source & you never declare it with any variable

The standard code is your return result.

return (
    <section>{<img src={require("../images/profile/mehraboon.jpg")} alt="person" />}</section>
  );