Home > Web Front-end > JS Tutorial > How to introduce local images into react pages

How to introduce local images into react pages

王林
Release: 2021-03-01 11:02:22
forward
3934 people have browsed it

How to introduce local images into react pages

Two ways to introduce local images in react.

Method 1. Non-background image introduction method

(1)-Use

<img src={require(&#39;图片路径&#39;)} />
Copy after login

directly in the src inside the img tag (2) import

import imgSrc from &#39;图片路径&#39;
<img src={imgSrc} />
Copy after login

Method 2. Import pictures as backgrounds

(1) Define it as an object in the render() method

const bgGround {
    display: &#39;inline-block&#39;,
    height: &#39;40px&#39;,
    width: &#39;40px&#39;,
    background: `url(${require("图片路径")})`
}

// 在return中使用
<span style={bgGround}>xxxxx</span>
Copy after login

(2) Import introduction

import imgUrl from &#39;图片路径&#39;
// render()中定义为对象
const bgGround = {
    display: &#39;inline-block&#39;,
    height: &#39;40px&#39;,
    width: &#39;40px&#39;,
    backgroundImage: &#39;url(&#39; + imgUrl + &#39;)&#39;}
//在return中使用
<span style={bgGround}>xxxxx</span>
Copy after login

Related recommendations: react tutorial

The above is the detailed content of How to introduce local images into react pages. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:大专栏
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template