Next.js v12纯静态项目静态图片正确编码及部署加载问题咨询

部署后图片加载失败和base64编码没有任何关系，完全是写法错误导致的，本地dev环境正常是因为开发模式下Next.js的静态资源处理逻辑和生产构建不一致：

• 你对存了图片引用的数组做手动JSON.stringify/JSON.parse是完全多余的操作。Next.js构建时会把import进来的本地图片替换成带内容哈希的生产环境静态资源URL，这个值本身就是普通字符串，可以直接序列化传递，但你手动做JSON转换的时机早于Next.js替换资源路径的构建环节，最终拿到的路径和生产环境实际输出的资源路径根本对不上。
• 放在public目录下的资源本来就可以直接通过/开头的路径访问，不需要额外import，多这一步反而容易干扰Next.js的静态资源收集逻辑。

第一步：调整数据文件写法 #

二选一即可，不要混着写：

方案A（推荐，适合public目录资源） #

完全去掉import和JSON序列化逻辑，直接写public目录对应的公开路径：

const bestPlacesList = [
   {
    cityName: "Ashland",
    state: "WI",
    country: "US",
    imageSquare: "/best-places-imagery/square-ashland.jpg",
    slug: "ashland-wi"
   }, 
   // 其余城市条目按相同规则写图片路径
]

export default bestPlacesList

方案B（适合需要拿图片原始尺寸、用next/image优化的场景） #

保留图片import，但彻底删掉所有手动JSON序列化的代码：

import SqAshland1 from '../../public/best-places-imagery/square-ashland.jpg'

const bestPlacesList = [
   {
    cityName: "Ashland",
    state: "WI",
    country: "US",
    imageSquare: SqAshland1,
    slug: "ashland-wi"
   }, 
   // 其余城市条目按相同规则引入图片
]

// 删除所有JSON.stringify相关的序列化代码
export default bestPlacesList

第二步：调整页面数据获取逻辑 #

在页面顶部正确引入数据文件，删掉所有手动JSON.parse的代码，Next.js会自动处理服务端到客户端的props序列化：

// 注意替换成你实际存放数据文件的相对路径
import bestPlacesList from '../../data/best-places-list'

export async function getStaticProps({ params, preview = false }) {
  // 直接遍历原始数组匹配数据，不需要做JSON转换
  const cityData = bestPlacesList.find( city => city.slug === params.slug )

  return {
    props: {
      preview,
      cityData,
    },
    revalidate: 60,
  };
}

export async function getStaticPaths() {
  // 直接用原始数组生成路径，不需要做JSON转换
  return {
    paths: bestPlacesList.map( (city) => ({
      params: { slug: city.slug }
    })),
    fallback: false,
  };
}

第三步：图片渲染 #

优先用Next.js内置的next/image组件渲染，直接拿cityData.imageSquare作为src即可，不需要额外做编码处理，Next.js会在构建时自动完成图片压缩、格式转换、路径匹配：

import Image from 'next/image'

export default function CityPage({ cityData }) {
  return (
    <div>
      <h1>{cityData.cityName}, {cityData.state}</h1>
      <Image 
        src={cityData.imageSquare} 
        alt={`${cityData.cityName}景观`}
        width={400} // 替换为你实际需要的展示宽度
        height={400} // 替换为你实际需要的展示高度
      />
    </div>
  )
}

除非是小于10kb的图标类资源，否则不要把图片转成base64存在数据里，这种做法会大幅增加页面JS体积，拖慢加载速度，完全违背Next.js静态资源优化的设计逻辑，你当前的场景完全不需要做这类处理。

内容的提问来源于stack exchange，提问作者serraosays