More than 3 years have passed since last update.

Reactで画像を表示する方法

Last updated at 2021-12-06Posted at 2021-08-01

Reactで画像を表示する方法

今回、Reactで画像を表示させる際、3つの方法を試してみました。
①JSXのみに書き込む方法
②画像ファイル、JSXの両方に画像のパスを書き込む方法
③画像ファイルのパスをインポートし、コンポーネントに表示させる方法

結果
①失敗

import React from 'react';

export const ImageTest {
  return <img src="images/logo/PNG" alt="picture" />
}

②失敗

import React from 'react';
import pic from "images/logo.PNG"

export const ImageTest {
  return <img src="images/logo/PNG" alt="picture" />
}

③成功！！!

import React from 'react';
import pic from "images/logo.PNG"

export const ImageTest {
  return <img src={pic} alt="picture" />
}

結果は③の③画像ファイルのパスをインポートし、コンポーネントに表示させる方法でのみ成功しました！