如何使用parcel在react中添加图片？

问题描述 投票：0回答：4

我一直在尝试在

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>
);
javascript reactjs web-component parceljs
4个回答
25
投票

你需要这样做

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

然后在你的反应中

JSX
遵循以下代码：

<img src={image} />
5
投票

<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';
，写得像没事一样。在引号中输入您的路径。然后在您的 
react
JSX
代码中编写您的 
img
标签，如下所示：

<img src={somePhoto} />

还有更多不同的方式。在其他

react
项目中，我们使用另一台服务器来加载图像。但申请的具体图片应该像上面这样。

0
投票
use static image with parcel problem solved......

我有同样的问题，但你可以使用parcel-plugin-static-files-copy包修复它：parcel-plugin-static-files-copy。然后使用此命令安装 npm i Parcel-plugin-static-files-copy ，然后将其添加到您的 .parcelrc plagin

{ “扩展”：“@parcel/config-default”， “解析器”：[“@parcel/resolver-glob”，“...”] } 启用后，您可以使用 ./files/*.png 等说明符导入多个文件。这将返回一个对象，其键对应于文件名。

从 './img/types/*.svg' 导入 * 作为图像；

使用---我在静态（根）文件夹中有图像文件夹

我在这个图像文件夹中有 16 张图像，现在我可以用作它们的名字

0
投票

从 Parcel 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"
  }
}

index.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/>)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.