通过内联样式动态设置背景 Div 图像时不显示 | Next.Js

我试图通过使用地图和外部 js 文件将图像存储为对象来从组件渲染图像，然后通过它们设置循环，将其设置为创建的每个 div 的不同背景图像（如果有意义的话）。我将提供代码来更清楚地说明我想要完成的任务，在地图过程中，我试图定位对象方法，但我相信它不起作用，因为我的图像都没有显示。

组件文件：WorkImages.js

export default function WorkImage({workImages}) {
    return (
        <div>
            {
                workImages.map((work) => {
                    return (
                        <div style={{backgroundImage: `url(${work.image})` }} id='work-img' className='work-img' key={work.id}>
                                <a href=""><div className="overlay">View Work</div></a>
                        </div>
                    );
                })
            }
        </div>
    )
}

我在循环时检索图像的对象文件（image.js）：import img1 from '../public/images/filler1.jpg' import img2 from '../public/images/filler2.jpg' import img3 from '../public/images/filler3.jpg'

const image = [
    {
        id: 1,
        image: img1
    },
    {
        id: 2,
        image: img2
    },
    {
        id: 3,
        image: img3
    }
]

export default image;

我试图用动态背景图像（Work.js）渲染 div 的主文件：import Aos from 'aos' import 'aos/dist/aos.css' import {useEffect, useState} from 'react' import WorkImage from './WorkImage'; import image from './image'

export default function Work() {
    const [workImages, setImage] = useState(image);
    useEffect(() => {
        Aos.init({duration: 2000});
    }, []); 
    return (
        <section id='work' className='work-section'>
            <div data-aos='fade-left'>
                <h1 className="work-header">- RECENT WORK -</h1>
                <div className="showcase-wrapper">
                    <WorkImage workImages={workImages} />
                </div>
            </div>
        </section>
    )
}

将图像对象更改为：

const images = [
    {
        id: 1,
        image: '/images/filler1.jpg'
    },
    {
        id: 2,
        image: '/images/filler2.jpg'
    },
    {
        id: 3,
        image: '/images/filler3.jpg'
    }
]

export default images;

没有必要import图像（如果它们已经存在）public目录。

Refer: 静态文件服务 https://nextjs.org/docs/basic-features/static-file-serving

对于那些面临类似问题并且没有使用public目录：

当你做这样的事情时import img from 'path/to/img.ext', img不是源，它是类型的对象StaticImageData，其定义如下：

type StaticImageData = {
  src: string;
  height: number;
  width: number;
  placeholder?: string;
};

所以，在这种情况下你需要使用img.src为网址。像这样的东西也适合你，而不是上面的解决方案：

{backgroundImage: `url(${work.image.src})` }

此外，在此特定代码中，不需要图像对象，因为文件已按顺序正确命名。像这样的事情也应该有效：

Array.from({ length: 3 }, (_, i) => i + 1).map((i) => (
  <div
    style={{ backgroundImage: `url(/images/filler${i}.jpg)` }}
    id={`work-img-${i}`}
    className='work-img'
    key={`work-${i}`}
  >
    <a href='/'>
      <div className='overlay'>View Work</div>
    </a>
  </div>
));

PS：改变你的id and key in map。你设置的是一样的id对于多个元素，并将索引设置为key不推荐。