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

How to introduce local images into react pages

王林
王林forward
2021-03-01 11:02:223932browse

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;)} />

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

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

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>

(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>

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!

Statement:
This article is reproduced at:大专栏. If there is any infringement, please contact admin@php.cn delete