How to pass the path of an image in React component?

Question

So I have a component that looks like this

import React from "react";

interface CInterface {
  name: string;
  word: string;
  path: string;
}

export function C({ name, word, path }: CInterface) {
  return (
    <div>
      <h2>{name}</h2>
      <>
        <img src={path} alt={name + "" + word} width="600" height="300" />
      </>
    </div>
  );
}

and the app.tsx file is like this

import React from "react";
import { C } from "./components/c";

function App() {
  return (
    <div className="App">
      <h1> K </h1>
      <ul>
        <li>
          {" "}
          <C name="B1" word=" is the best " path="./Images/B1.png" />
        </li>
      </ul>
    </div>
  );
}

export default App;

But the image doesn't load. How do i make it dynamic?

I want to pass both the image name and image path to the component.

Pavel Alekseev · Accepted Answer · 2020-12-02 15:33:00Z

4

Try to import your image and then pass it to path:

...
import b1Image from './Images/B1.png';
...
<Cat name="B1" word=" is the best " path={b1Image} />
...

To learn more: https://create-react-app.dev/docs/adding-images-fonts-and-files/

answered Dec 2, 2020 at 15:33

Pavel Alekseev

1,2221 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass the path of an image in React component?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related