如何在Next.js的next/image组件中使用键值对里的图片地址？

你的核心问题是数组里的image字段存的是字符串"bpstar"，但Next.js的Image组件需要的是导入后的图片模块（也就是你直接写src={bpstar}时的资源值）。下面提供两种可行的解决方式：

方法1：直接在数组中使用导入的图片变量 #

这是最直接的方案，把数组里的字符串替换成实际导入的图片变量即可：

import Image from 'next/image'
import bpstar from '../images/logos/bpstar.png'

const faqs = [
  [
    {
      status: 'working on it',
      image: bpstar // 这里用导入的变量，而非字符串
    }
  ]
]

// 渲染逻辑保持不变
{faqs.map((column, columnIndex) => (
  <li key={columnIndex}>
    <ul role="list" className="space-y-10">
      {column.map((faq, faqIndex) => (
        <li key={faqIndex}>
          {faq.image && (
            <Image
              src={faq.image}
              alt="_"
              width={80}
              height={80}
            />
          )}
        </li>
      ))}
    </ul>
  </li>
))}

方法2：用映射对象关联字符串与图片变量 #

如果必须用字符串作为图片标识（比如数据来自外部接口或配置文件），可以创建一个映射对象，把字符串键和对应的图片变量绑定：

import Image from 'next/image'
import bpstar from '../images/logos/bpstar.png'

// 创建图片映射表
const imageMap = {
  bpstar: bpstar
}

const faqs = [
  [
    {
      status: 'working on it',
      image: "bpstar" // 这里保留字符串键
    }
  ]
]

// 渲染时通过映射表获取图片资源
{faqs.map((column, columnIndex) => (
  <li key={columnIndex}>
    <ul role="list" className="space-y-10">
      {column.map((faq, faqIndex) => (
        <li key={faqIndex}>
          {faq.image && imageMap[faq.image] && (
            <Image
              src={imageMap[faq.image]}
              alt="_"
              width={80}
              height={80}
            />
          )}
        </li>
      ))}
    </ul>
  </li>
))}

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