web-dev-qa-db-fra.com

Comment ajouter une image dans React en utilisant un colis?

J'ai essayé d'ajouter une image dans react. Je n'utilise pas webpack, j'utilise parceljs. J'utilise également TypeScript J'ai essayé:

import image from path/to/image.png<img src={image} />

composant réagissant à l'intérieur:

essayez: <img src="path/to/image.png" />

essayez: <img src={"path/to/image.png"} />

Ça ne marche toujours pas.

le code ressemble un peu à ceci:

import * as React from 'react';

const componentName = () => (
  <div>
     <img src="path/to/image.png" />
  </div>
);
javascriptreactjsweb-componentparceljs
13
Josue Toledo

Vous devez le faire comme ça

import image from 'path/to/image.png';

Et puis à l'intérieur de votre react JSX suivez le code ci-dessous:

<img src={image} />
9
Siya

Ce n'est pas différent entre <img src="path/to/image.png"/> et <img src={"path/to/image.png"}/>, vous devez import votre image, puis l'utiliser comme un objet JavaScript, voir ci-dessous:

import somePhoto from 'path/to/image.png';

Vous ne vous occupez pas de 'path/to/image.png'; et l'a écrit comme rien. entrez votre chemin d'accès entre guillemets. Ensuite, à l'intérieur de votre code reactJSX, écrivez votre balise img comme ci-dessous:

<img src={somePhoto} />

Il existe plusieurs façons différentes. dans d'autres projets react, nous utilisons un autre serveur pour charger les images. mais les images spécifiques pour l'application doivent être comme ci-dessus.

0
AmerllicA