无法从React.js中的本地库中加载图像 [英] Unable to load images from local library in React.js

问题描述

我为我的网站编写了一个代码，不幸的是，我无法加载位于我本地图书馆中的图像。我已将图片文件夹移至'src'文件夹内，但图片完全无法加载。

以下是我的组件的代码，名为'Landscape'

代码：

  import React，{组件}来自'react'; 
从'react-bootstrap'导入{Grid，Button，Row，Col，Thumbnail}; 
 import'react-bootstrap-carousel'; 
导入'./Landscape.css'; 
 
导出默认类Landscape延伸Component {
 render（）{
 return（
< div className =thumbnails> 
< Grid> ; 
< Row> 
< Col xs = {6} md = {4}> 
< Thumbnail src =。Pictures / 1.jpgalt =242x240 > 
< h3> Elephant< / h3> 
< p>动物园< / p> 
< p> 
< Button bsStyle =primary>如< / Button> 
 {''} 
< Button bsStyle =primary>不喜欢< / Button> 
< / p> 
< / Thumbnail> 
< / Col> 
< / Row> 
< / Grid> 
< / div> 
 
）; 
}} 
  

解决方案

你可以直接在你的组件中导入它。

 从'./Pictures/1.jpg'导入logo。 
  

然后调用它

 < img src = {logo} alt =logowidth = {240} height = {240} /> 
  

如果因为无法使用导入路径而拥有数百个图像，则必须创建图像文件夹，并使用此代码。

  //这是常规方式。 
 
< img src = {process.env.PUBLIC_URL +'images / profile.svg'} width = {200} height = {200} className =profile-imgalt =profile/> 
  

另一种方式可以指定每个组件都有一个 images.js 文件，然后在 images.js 中导入所有延迟该组件的图像，并将其命名为相关组件名称
（它会让你知道这个图像文件是什么。）

images.js

 从'./images/logo.svg'导入标志; 
从'./images/cover.svg'导入封面; 
从'./images/profile.svg'导入配置文件; 
从'./images/body.svg'导入background1; 
导出默认值{
徽标，
覆盖，
配置文件，
 background1 
} 
  

然后在你的组件中，你可以导入 images.js文件：

 从'./images'导入图像; 
  

然后打电话给任何你想要的img：

 < img src = {images.logo} className =App-logoalt =logo/> 
< img src = {images.cover} className =App-logoalt =logo/> 
< img src = {images.profile} className =App-logoalt =logo/> 
< img src = {images.background1} className =App-logoalt =logo/> 
  

I have written a code for my website and unfortunately, i am not able to load images that are located in my local library. I have moved my images folder inside 'src' folder, but the image doesn't load at all.

Here is the code for my component called 'Landscape' which I am trying to load.

Code:

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>

);
}}

解决方案

If you have a few images you can just import it directly in your component

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

Then call it

<img src={logo} alt="logo" width={"240"} height={"240"}  />

if you have hundreds of images because you can’t use import paths, you have to create a images folder in the public folder and use this code.

 //This is the regular way.

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

Another way you can specify each component has a images.js file, then import all the images that retarded of that component in images.js and name it as the related component name (It will let you know what this images file for.)

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
}

Then in your component you can just import images.js file:

import images from './images';

Then call any img you want:

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

这篇关于无法从React.js中的本地库中加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！