skip to Main Content

we can use JavaScript expressions inside curly braces in React but for image, I can’t understand why we put that inside curly braces in react since it’s not a JavaScript expression.

code:

import ps5Logo from '/ps5.png';
<img src={ps5Logo} className="logo" alt="Vite logo" />;

2

Answers


  1. The import statement brings it into JS, which is why you then pass it in via curly braces.

    If you wanted to host the image separately, then you could use a basic string to point to the relative url location of the image file.

    Login or Signup to reply.
  2. In your example className and alt are props with static values, using props="value" is fine in that case.

    Regarding the src the value is a dynamic import, and thus needs prop={dynamicValue} to pass that along.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search