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

【问题标题】：Unable to load images from local library in React.js无法从 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" alt="242x240">
        <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 文件夹中还是为它们创建了一个文件夹？因为你的路错了

标签： javascript html css reactjs

【解决方案1】：

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

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

import pic1 from './Pictures/1.jpg';
...
<Thumbnail src={pic1} alt="242x240">

您可以阅读更多here。

【讨论】：

【解决方案2】：

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

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

然后调用它

<img src={logo} alt="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" alt="profile" />

另一种方式你可以指定每个组件有一个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" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />

【讨论】：

非常感谢。我试过了，它奏效了。如果我有 50 张图像要显示为缩略图怎么办？导入每张图像会花费更多时间，并且假设将来，如果我需要替换其中的一些图像会花费更多时间。没有其他方法可以拉图片吗？
@PruthviRajGowda 如果您有 50 张图片，您应该考虑通过数据库管理它们，并自动在组件中加载和显示它们。
或者至少在 JSON 文件中引用它们，如果您只想遍历所有图像，可以在数组中引用它们，如果您想单独访问图像，可以在键/值对中引用它们。跨度>
@PruthviRajGowda 我刚刚编辑了我的答案，请查看
非常感谢您的回复！我正在按照您解释的方式进行操作。你太棒了！

【解决方案3】：

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

它适用于使用 create-react-app

启动的项目

【讨论】：