如何将本地图像添加到我的投资组合的 vite React 项目中？

Question

我正在尝试将图像添加到我的投资组合项目的主页，这是我的以下代码。我添加了图像文件夹，并尝试在下面调用它，但它似乎没有上传。

import React from 'react'

const Main = () => {
  return (
    <div id='Main'>
        <img className='' src="./images/IMG_0448" alt="" />
    </div>
  )
}

export default Main

Answer 1

您可以导入图像并将其添加到

src

标签的

<img>

属性，如下所示：

react.svg 放置在 /src/assets 文件夹中。你可以看到文件夹结构

import reactImg from "./assets/react.svg";

function Main() {
  return (
    <div id="Main">
      <img className="" width={250} src={reactImg} alt="" />
    </div>
  );
}

export default Main;