Блог

Итак, у меня есть компонент, который выглядит следующим образом

 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>
  );
}
 

и файл app.tsx выглядит следующим образом

 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;
 

Но изображение не загружается. Как мне сделать его динамическим?

Я хочу передать компоненту как имя изображения, так и путь к изображению.

Попробуйте импортировать свое изображение, а затем передать его в path:

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

Чтобы узнать больше: https://create-react-app.dev/docs/adding-images-fonts-and-files /