通过内联样式动态设置背景Div图像时不显示它们|Next.Js [英] Background Div Images not displaying when setting them via Inline Styles Dynamically | 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目录中，则不需要import图像。

参考：Static File Serving

---

对于面临类似问题且未使用public目录的用户：

您这样做import img from 'path/to/img.ext'，img不是源，它是StaticImageData类型的Object，定义如下：

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

因此，在这种情况下，您需要使用img.src作为URL。这样的解决方案也适用于您，而不是上面的解决方案：

{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：更改map中的id和key。您为多个元素设置了相同的id，而且不建议将索引设置为key。

这篇关于通过内联样式动态设置背景Div图像时不显示它们|Next.Js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！