ホームページ > ウェブフロントエンド > jsチュートリアル > ローカル画像を反応ページに導入する方法

ローカル画像を反応ページに導入する方法

王林
リリース: 2021-03-01 11:02:22
転載
3934 人が閲覧しました

ローカル画像を反応ページに導入する方法

React でローカル イメージを導入する 2 つの方法。

方法1.非背景画像導入方法

(1)-imgタグ内のsrc内で直接

<img src={require(&#39;图片路径&#39;)} />
ログイン後にコピー

を使用する(2)import

import imgSrc from &#39;图片路径&#39;
<img src={imgSrc} />
ログイン後にコピー

方法 2. 画像を背景としてインポートする

# (1) render() メソッドでオブジェクトとして定義する

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 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>
ログイン後にコピー
関連する推奨事項:

反応チュートリアル

以上がローカル画像を反応ページに導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:大专栏
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート