React导入图片路径的方式(含vite导入方式)

 1.使用import引入

import logo from "../asset/logo.png"
const page:React.FC = ()=>{
    return(
        <div>
            <img src={logo} alt="" />
        </div>
    )
}

2.使用require直接导入路径

const page:React.FC = ()=>{
    return(
        <div>
            <img src={require(../asset/logo.png)} alt="" />
        </div>
    )
}

 3.vite下导入，同理可以用第一种方式(1)导入，想要更灵活可以用vite自带的静态资源文件解析方式进行导入。我们使用它来构建图片的完整路径。这允许你在构建过程中动态地处理图片路径。

const page:React.FC = ()=>{
const logo = new URL('../asset/logo.png',import.meta.url).href
    return(
        <div>
            <img src={logo} alt="" />
        </div>
    )
}