时间戳

首页 > 解决方案 > 通过内联样式动态设置背景 Div 图像时不显示 | Next.js

css - 通过内联样式动态设置背景 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>
    )
}

标签： cssreactjsimagenext.js

解决方案

将您的图像对象更改为：

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目录中，则不需要图像。

参考：静态文件服务

对于那些面临类似问题且不使用public目录的人：

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

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

因此，在这种情况下，您需要使用img.srcURL。像这样的东西也适用于您，而不是上述解决方案：

{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和key在map. 您id为多个元素设置相同，并且key不推荐设置索引。

推荐阅读