web-dev-qa-db-ja.com

小包を使用して反応で画像を追加する方法？

reactに画像を追加しようとしています。私はwebpackを使用していません。parceljsを使用しています。また、TypeScriptを使用して私は試してみました：

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

反応コンポーネント内：

試してください：<img src="path/to/image.png" />

試してください：<img src={"path/to/image.png"} />

それでも動作しません。

コードは次のようになります。

import * as React from 'react';

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

このようにする必要があります

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

そして、あなたの反応の中でJSX以下のコードに従ってください：

<img src={image} />
9
Siya

<img src="path/to/image.png"/>と<img src={"path/to/image.png"}/>の違いはありません。画像をimportしてからJavaScriptオブジェクトのように使用する必要があります。以下を参照してください：

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

あなたは'path/to/image.png';に参加せず、何も書いていない。引用符でパスを入力します。次に、reactJSXコード内に次のようにimgタグを記述します。

<img src={somePhoto} />

さまざまな方法があります。他のreactプロジェクトでは、別のサーバーを使用して画像を読み込みます。ただし、アプリケーションの具体的な画像は上記のようにする必要があります。

0
AmerllicA