首頁 > web前端 > js教程 > react中如何匯入圖片

react中如何匯入圖片

coldplay.xixi
發布: 2020-11-30 16:12:32
原創
6594 人瀏覽過

react中導入圖片的方法:1、透過import方式導入,程式碼為【import logo from './asset/logo.jpg'】;2、使用require方法,程式碼為【

react中如何匯入圖片

#本教學操作環境:windows10、react16,本文適用於所有品牌的電腦。

react中導入圖片的方法:

1、透過import方式(適用於插入靜態圖片):

import React from 'react'
import logo from './asset/logo.jpg'
export default class Login extends React.Component {
    render() {
        return (<>
            <img src={logo} alt="logo" />
        </>)
    }
}
登入後複製

2、使用require方法(可以使用此方法插入動態圖片):

<img src={require(&#39;../img/iconxx.png&#39;)} alt="" />
登入後複製

require中不能有純粹的代表圖片地址的變量,但是可以透過變數和字串拼接的方式來使用此方法。

3、css中可以透過直接使用圖片位址的方式來引用圖片(和原生的一樣)。

相關免費學習推薦:JavaScript(影片)

以上是react中如何匯入圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板