Next.js + Tailwind CSS本地资源背景图加载异常问题求助

创建热门电影列表，使用background-image展示电影缩略图，需实现动态加载。

在Next.js中从本地src/assets/thumbnails目录获取图片作为背景图时出现异常：部分图片可正常加载，部分无法加载。
示例：

• 可正常加载：../assets/thumbnails/112/regular/small.jpg
• 无法加载：../assets/thumbnails/112/regular/large.jpg

export default function TrendingMovie({
  title,
  thumbnail,
  year,
  category,
  rating,
}: MovieInterface) {
  const img = "../assets/thumbnails/112/regular/large.jpg";
  const test = "bg-[url('" + `${img}` + "')]";
  return (
    <div className={`${test} w-[100%] h-[100%]  p-4 rounded-lg`}>
      <div className="flex flex-col justify-between h-full bg-opacity-50 ">
        <div className="ml-auto bg-black bg-opacity-70 p-4 rounded-full w-[25%] grid place-items-center h-auto">
          <img
            className="w-[100%} h-[100%]"
            src={EmptyBookMarkIcon.src}
            alt="Empty Bookmark Icon"
          ></img>
        </div>
        <div className="flex flex-row justify-between items-center bg-black bg-opacity-50 rounded-xl p-4">
          <MovieDescription
            title={title}
            thumbnail={thumbnail}
            year={year}
            category={category}
            rating={rating}
          ></MovieDescription>
        </div>
      </div>
    </div>
  );
}

使用<img>标签加载../assets/thumbnails/112/regular/large.jpg时可正常显示，代码如下：

import TheLargeImage from "../assets/thumbnails/112/regular/large.jpg";
export default function TrendingMovie({
  title,
  thumbnail,
  year,
  category,
  rating,
}: MovieInterface) {
  const img = "../assets/thumbnails/112/regular/large.jpg";
  const test = "bg-[url('" + `${img}` + "')]";
  return (
    <div className={`${test} w-[100%] h-[100%]  p-4 rounded-lg`}>
      <img src={TheLargeImage.src} alt="The large Imge"></img>
      {/* <div className="flex flex-col justify-between h-full bg-opacity-50 ">
        <div className="ml-auto bg-black bg-opacity-70 p-4 rounded-full w-[25%] grid place-items-center h-auto">
          <img
            className="w-[100%} h-[100%]"
            src={EmptyBookMarkIcon.src}
            alt="Empty Bookmark Icon"
          ></img>
        </div>
        <div className="flex flex-row justify-between items-center bg-black bg-opacity-50 rounded-xl p-4">
          <MovieDescription
            title={title}
            thumbnail={thumbnail}
            year={year}
            category={category}
            rating={rating}
          ></MovieDescription>
        </div>
      </div> */}
    </div>
  );
}

解决方法 #

问题根源是Next.js的资源处理机制：直接用字符串拼接的相对路径作为background-image的URL时，Next.js构建工具无法正确识别并处理这些资源，导致路径解析错误。而<img>标签通过import引入时，Next.js会自动生成正确的资源URL。

方案一：通过import引入图片后拼接背景类名 #

import TheLargeImage from "../assets/thumbnails/112/regular/large.jpg";
export default function TrendingMovie({
  title,
  thumbnail,
  year,
  category,
  rating,
}: MovieInterface) {
  const bgClass = `bg-[url('${TheLargeImage.src}')]`;
  return (
    <div className={`${bgClass} w-full h-full p-4 rounded-lg`}>
      <div className="flex flex-col justify-between h-full bg-opacity-50 ">
        <div className="ml-auto bg-black bg-opacity-70 p-4 rounded-full w-[25%] grid place-items-center">
          <img
            className="w-full h-full"
            src={EmptyBookMarkIcon.src}
            alt="Empty Bookmark Icon"
          />
        </div>
        <div className="flex flex-row justify-between items-center bg-black bg-opacity-50 rounded-xl p-4">
          <MovieDescription
            title={title}
            thumbnail={thumbnail}
            year={year}
            category={category}
            rating={rating}
          />
        </div>
      </div>
    </div>
  );
}

方案二：使用内联样式设置背景图（更适合动态场景） #

import TheLargeImage from "../assets/thumbnails/112/regular/large.jpg";
export default function TrendingMovie({
  title,
  thumbnail,
  year,
  category,
  rating,
}: MovieInterface) {
  return (
    <div 
      style={{ 
        backgroundImage: `url(${TheLargeImage.src})`,
        width: '100%',
        height: '100%',
        padding: '1rem',
        borderRadius: '0.5rem'
      }}
    >
      <div className="flex flex-col justify-between h-full bg-opacity-50 ">
        <div className="ml-auto bg-black bg-opacity-70 p-4 rounded-full w-[25%] grid place-items-center">
          <img
            className="w-full h-full"
            src={EmptyBookMarkIcon.src}
            alt="Empty Bookmark Icon"
          />
        </div>
        <div className="flex flex-row justify-between items-center bg-black bg-opacity-50 rounded-xl p-4">
          <MovieDescription
            title={title}
            thumbnail={thumbnail}
            year={year}
            category={category}
            rating={rating}
          />
        </div>
      </div>
    </div>
  );
}

动态加载适配 #

如果需要根据props传入不同图片路径，可使用require动态引入：

export default function TrendingMovie({
  title,
  thumbnailPath, // 示例传入值：'112/regular/large.jpg'
  year,
  category,
  rating,
}: MovieInterface) {
  const imageUrl = require(`../assets/thumbnails/${thumbnailPath}`).default.src;
  const bgClass = `bg-[url('${imageUrl}')]`;
  
  return (
    <div className={`${bgClass} w-full h-full p-4 rounded-lg`}>
      {/* 组件其余内容 */}
    </div>
  );
}

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