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

【问题标题】：Background Div Images not displaying when setting them via Inline Styles Dynamically | Next.Js通过内联样式动态设置背景 Div 图像时不显示 | Next.js
【发布时间】：2021-10-01 15:22:10
【问题描述】：

我正在尝试通过使用地图和外部 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>
    )
}

【问题讨论】：

标签： css reactjs image next.js

【解决方案1】：

将您的图像对象更改为：

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

export default images;

如果图像已经在public 目录中，则不需要import。

参考：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 作为 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。

【讨论】：