Question

我为我的网站编写了代码，遗憾的是，我无法加载位于我本地图书馆的图片。我已将图像文件夹移到'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>

);
}}

Answer 1

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

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" />

Answer 2

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

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

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

您可以阅读更多here。

Answer 3

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

它适用于使用 create-react-app

启动的项目

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

3 个答案: