NextJs getStaticProps vs直接导入本地图像资源

Question

假设我有一个静态图像资源，我想用它作为主页的英雄图像。输入它的正确方法是什么?直接导入

有区别吗?

import hero from "/public/assets/hero.jpg"
export default function Home(){
return(
<>
<Image src={hero}/>
</>
)}

vs导入它，然后通过getStaticProps提供数据:

import hero from "/public/assets/hero.jpg"
export default function Home({data}){
return(
<>
<Image src={data}/>
</>
)}

export const getStaticProps = async(()=>{
props: {
data: hero
}
})

我试图理解它与上面的用例有什么区别，或者根本没有区别。

Answer 1

测试后，我发现没有区别。在这两种情况下，图像的URL都是被传递的，并且浏览器将以完全相同的方式通过URL请求图像。

我使用了一个较小的图像(2K)来测试，在第二种情况下，理论上可以将base-64编码内联到源代码中，但这没有发生，至少没有自动发生。