ReactJS:如何从URL|本地文件夹中显示图片的方法（附实例）

在本教程中，你将学习如何在Reactjs应用程序中显示来自URL或本地文件夹的图像。

本篇文章包括以下内容

React简单图像组件

在HTML中。 标签中使用src 属性显示图片

下面是一个使用htmlimg标签的例子。

<img src="https://picsum.photos/200" alt="display image" />

如果你想在React中显示图片，请创建一个组件，如下所示。

import React, { Component } from 'react';

class ImageComponent extends Component {
    render() {
        return (
            
                
            
        );
    }
}

export default ImageComponent;

在javascript或JSX文件中调用该组件是很简单的，例如，在App.js中

import "./App.css";
import ImageComponent from "./components/ImageComponent";

function App() {
  return (
    <div className="App">
      <h1>React Example</h1>
      <ImageComponent url="https://picsum.photos/200" />
      
    </div>
  );
}

export default App;

这里，图片的URL被加载到组件中并显示在浏览器上。这个组件有几个改进之处

首先，图片的网址是固定的，而不是动态的。第二，所以你需要创建一个多个组件来显示多个图片。

你可能会问：你如何处理多张图片？

是的，可以用一个组件声明加载多个图片。

从URL加载图片的props/states

在该组件中，将URL的设置移到组件外。使用this.props ，从URL加载图片。使用this.props.url值设置src。

即使声明了构造函数，在组件中也可以直接访问props。它不需要构造函数也能工作。

import React, { Component } from 'react';

class ImageComponent extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
             <div>
                <img src={this.props.url} alt="display image" />
                <img src={this.props.url} alt="display image" />

            </div>
        );
    }
}

export default ImageComponent;

在App.js中，多个图片被作为一个属性传递给一个组件。

<ImageComponent url="https://picsum.photos/200" />
      <br></br>
<ImageComponent url="https://picsum.photos/200/300" />

这样一来，在reactjs中从URL中加载图片就非常容易和简单。

在React中从本地文件夹加载图片

在React应用程序中，图像从不同的文件夹位置被提供。

首先，如果图片是从公共文件夹提供的

公共文件夹的资产可以在html页面中直接访问

图像200.jpg放置在public/images/200.jpg位置。

你可以在调用组件时直接在App.js中提供该路径

    <ImageComponent url="images/200.jpg" />

如果图片在src文件夹中，你必须使用导入功能导入带路径的图片。

import myimage from './200.jpg';

调用上述创建的组件，并传递url=myimage

<ImageComponent url={myimage} />

总结

你学会了如何从URL/本地公共/src文件夹中加载图片并在Reactjs应用程序中显示