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

IT技术 javascript html css reactjs
2021-04-04 22:35:10

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

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

代码：

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>

);
}}
3个回答

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

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并将其命名为相关组件名称

图像.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" />
@PruthviRajGowda 如果您有 50 张图像，则应考虑通过数据库管理它们，并在组件中自动加载和显示它们。
2021-05-23 22:35:10
或者至少在 JSON 文件中引用它们，如果您只想迭代所有图像，则在数组中，或者如果您想单独访问图像，则在键/值对中引用它们。
2021-05-25 22:35:10
太感谢了。我试过了，它奏效了。如果我有 50 张图像要显示为缩略图怎么办？导入每个图像会花费更多时间，假设将来，如果我需要替换其中一些图像会花费更多时间。没有其他方法可以拉取图像吗？
2021-05-28 22:35:10
非常感谢您的回复！我是按照你解释的方式做的。你真棒！
2021-06-09 22:35:10
@PruthviRajGowda 我刚刚编辑了我的答案，请查看
2021-06-13 22:35:10

我的回答仅适用于您使用create-react-app或 Webpackfile-loader插件的情况。

您必须先导入图片文件，然后才能使用它。必须这样做才能使 Webpack 为生产构建正确捆绑图像。

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

您可以在此处阅读更多内容。

将所有图像放在公共文件夹下的一个“图像”文件夹中，然后在项目的任何位置，您都可以在img元素中使用以下路径：

它适用于使用create-react-app启动的项目

其它你可能感兴趣的问题
上一篇react select onChange 返回以前的值而不是当前值 下一篇Firebase 存储：将图像下载并放入 React 地图中的 img src