无法从 React.js 中的本地库加载图像

Posted 2023-03-06

【中文标题】无法从 React.js 中的本地库加载图像

【英文标题】：Unable to load images from local library in React.js

【发布时间】：2018-06-15 17:20:47

【问题描述】：

我已经为我的网站编写了代码，但很遗憾，我无法加载位于本地库中的图像。我已将图像文件夹移至“src”文件夹中，但图像根本无法加载。

这是我正在尝试加载的名为“风景”的组件的代码。

代码：

import React, Component from 'react';
import Grid, Button, Row, Col, Thumbnail from 'react-bootstrap';
import 'react-bootstrap-carousel';
import './Landscape.css';

export default class Landscape extends Component
render()
return(
<div className="thumbnails">
  <Grid>
    <Row>
      <Col xs=6 md=4>
        <Thumbnail src=".Pictures/1.jpg" >
        <h3>Elephant</h3>
        <p>zoo</p>
        <p>
          <Button bsStyle="primary">Like</Button>
          ' '
          <Button bsStyle="primary">Dislike</Button>
        </p>
        </Thumbnail>
      </Col>
    </Row>
  </Grid>
</div>

);

【问题讨论】：

你使用的是 webpack 还是类似的东西？

不应该是./Pictures/1.jpg吗？希望您只希望它在开发模式下工作。

你在使用create-react-app吗？

您是直接将图片保存在 src 文件夹中还是为它们创建了一个文件夹？因为你的路错了

【参考方案1】：

我的回答仅适用于您使用create-react-app 或带有file-loader 插件的Webpack。

使用前必须先导入图片文件。必须这样做才能让 Webpack 为生产构建正确地捆绑图像。

import pic1 from './Pictures/1.jpg';
...
<Thumbnail src=pic1 >

您可以阅读更多here。

【参考方案2】：

如果你有一些图片，你可以直接在你的组件中导入它

import logo from './Pictures/1.jpg';

然后调用它

<img src=logo  width="240" height="240"  />

如果由于无法使用导入路径而拥有数百张图片，则必须在公共文件夹中创建一个图片文件夹并使用此代码。

 //This is the regular way.

  <img src=process.env.PUBLIC_URL + 'images/profile.svg' width="200" height="200" className="profile-img"  />

另一种方式你可以指定每个组件有一个images.js文件，然后在images.js中导入该组件的所有延迟图像并将其命名为相关组件名称

images.js

import logo from './images/logo.svg';
import cover from './images/cover.svg';
import profile from './images/profile.svg';
import background1 from './images/body.svg';
export default 
    logo,
    cover,
    profile,
    background1

然后在你的组件中你可以只导入images.js file:

import images from './images';

然后调用任何你想要的img：

      <img src=images.logo className="App-logo"  />
      <img src=images.cover className="App-logo"  />
      <img src=images.profile className="App-logo"  />
      <img src=images.background1 className="App-logo"  />

【讨论】：

非常感谢。我试过了，它奏效了。如果我有 50 张图像要显示为缩略图怎么办？导入每张图像会花费更多时间，并且假设将来，如果我需要替换其中的一些图像会花费更多时间。没有其他方法可以拉图片吗？

@PruthviRajGowda 如果您有 50 张图片，您应该考虑通过数据库管理它们，并自动在组件中加载和显示它们。

或者至少在 JSON 文件中引用它们，如果您只想遍历所有图像，可以在数组中引用它们，如果您想单独访问图像，可以在键/值对中引用它们。跨度>

@PruthviRajGowda 我刚刚编辑了我的答案，请查看

非常感谢您的回复！我正在按照您解释的方式进行操作。你太棒了！

【参考方案3】：

将所有图片放在 public 文件夹下的一个 'images' 文件夹中，然后在项目中的任何位置，您都可以在 img 元素中使用以下路径：

它适用于使用 create-react-app

启动的项目