我一直在尝试在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>
);
你需要这样做
import image from 'path/to/image.png';
然后在你的反应JSX按照以下代码进行操作：
<img src={image} />
<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项目中，我们使用另一个服务器来加载图像。 但是应用程序的特定图像应如上所示。
use static image with parcel problem solved......
我有同样的问题，但您可以使用包裹插件静态文件复制包修复它：包裹插件静态文件复制。然后使用此命令 npm i 包裹插件-静态文件-复制进行安装 ，然后将其添加到您的 .parcelrc plagin
{ "extends"： "@parcel/config-default"， "旋转变压器"： ["@parcel/旋转变压器-glob"， "..."] } 启用后，您可以使用 ./files/*.png 等说明符导入多个文件。这将返回一个对象，其中包含与文件名对应的键。
从"./img/types/*.svg"导入 * 作为图像;
使用---我在静态(根(文件夹中有图像文件夹
我在这个图像文件夹中有 16 张图像，现在我可以用作他们的名字
从宗地 2 开始，您可以使用URL包含图像。请参阅 https://parceljs.org/recipes/react/#images
const logo = new URL('logo.svg', import.meta.url);
export function Logo() {
return <img src={logo} alt="logo" />;
}
下面是使用 js+images 的项目布局示例：
$ tree -I node_modules/ -I dist
.
├── index.html
├── package-lock.json
├── package.json
└── src
├── img
│ └── logo.png
└── js
└── index.js
package.json：
{
"devDependencies": {
"parcel": "^2.9.3"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
索引.html：
<!doctype html>
<html>
<head>
<script type="module" src="src/js/index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/js/index.js：
import { createRoot } from 'react-dom/client'
function App() {
const logo = new URL('/src/img/logo.png', import.meta.url)
return <div>
<h1>My App</h1>
<img src={logo} alt='logo'/>
</div>
}
const domNode = document.getElementById('root')
const root = createRoot(domNode)
root.render(<App/>)