React 引入本地靜態文件或圖片

之前我們引入圖片可以直接使用

<img src="../assets/logo.png" alt="" />

但在React中並不可用

推薦方法一：

import logo from '../../assets/imgUrl/logo.png'
export default function Header() {
    return (
        <div>
            <div className='header'>
                <div className='imgUrl'>
                    <img src={logo} alt="" />
                </div>
            </div>
        </div>
    )
}

通過import引入圖片

還有一種方法：

<img src={require("../../assets/imgUrl/logo.png")} alt="" />

通過require引入。

 

以上就是圖片的引入，推薦方法1.可以實現變量名