css 使用Map函数在React中未显示背景图像

06odsfpq 于 2023-06-25 发布在 React

关注(0)|答案(2)|浏览(138)

我有一个幻灯片组件，我想用它在React中创建一个carousel。我想使用public/images文件夹中的图像作为旋转木马的背景图像。我创建了一个对象数组，其中图像存储在“backgroundImage”属性中，如代码所示：

const featured = [
      {
        designation: 'Author',
        date: dateFormat,
        authorImage: '/images/person_1.jpg',
        backgroundImage: 'images/img_1.jpg',
        title: 'This is the first featured-post',
        category: 'Programming and Framework',
        commentCount: 5,
    },
{
        designation: 'member board of editors',
        date: dateFormat,
        authorImage: '/images/person_1.jpg',
        backgroundImage: 'images/img_2.jpg',
        title: 'This is the second featured-post',
        category: 'Industry Insight',
        commentCount: 12,
    },
    {
    designation: 'Member',
        date: dateFormat,
        authorImage: '/images/person_1.jpg',
        backgroundImage: 'images/img_3.jpg',
        title: 'This is the third featured-post',
        category: 'IoT',
        commentCount: 1512,
     }
]

在幻灯片组件中，我创建了一个map函数，用于从数组中提取图像，并将其保存在变量“featImg”中，如下面的代码所示：

import React from 'react';
import featured from '../pages/featured_news';

const Slides = () => {
  const featImg = featured.map((feat) => (feat.backgroundImage)
  );

  return (
    <div
      className="flex"
      style={{
        backgroundImage: `url(${featImg})`,
        height: '300px',
        backgroundSize: 'cover',
        backgroundColor: 'green',
        backgroundRepeat: 'no-repeat'
      }}
    ></div>
  );
};

export default Slides;

当我启动服务器（npm start）时，浏览器中不显示背景图像。使用检查工具，图像显示为字符串，如下所示：url（“images/img_1.jpg，images/img_2.jpg，images/img_3.jpg”）;而不是显示实际的背景图像。
请问我在代码中做错了什么，我需要一些更正。

css

来源：https://stackoverflow.com/questions/76539835/background-image-not-showing-in-react-using-map-function

2条答案

按热度按时间

js5cn81o1#

您对map的工作原理有一个小小的误解。此时，您正在Map对象数组并返回一个 new 背景图像名称数组。然后将该数组应用于从组件返回的 one 元素。
你应该做的是在map进程中创建该元素，这样在每次迭代中，都会创建一个新元素，其背景图像名称为当前迭代对象的名称。
然后从组件返回新创建的元素的整个数组。

import React from 'react';
import featured from '../pages/featured_news';

const Slides = () => {
  return featured.map(feat => {
    return (
      <div
        className="flex"
        style={{
          backgroundImage: `url(${feat.backgroundImage)})`,
          height: '300px',
          backgroundSize: 'cover',
          backgroundColor: 'green',
          backgroundRepeat: 'no-repeat'
        }}
      />
    );  
  });
};

export default Slides;

注意：根据你调用this组件的方式，你可能想把这个返回的代码 Package 在一个父元素中：

const Slides = () => {
  return (
    <div class="slideWrapper">
      {featured.map(feat => {
        ...
      })}
    </div>
  );
};

赞(0）回复(0）举报 2023-06-25

piah890a2#

发生这种情况是因为您将featImg作为background-image传递。featImg是图像URL的数组。你需要传递一个数组元素，如下所示：featImg[0]。如果你试图在一个div中放置多个背景，你不能这样做。
如果你想从数组featImg创建多个div（s）背景图像，你可以使用类似的东西：

import React from 'react';
import featured from '../pages/featured_news';

const Slides = () => {
  const featImg = featured.map((feat) => (feat.backgroundImage));

  return (
    <>
      {featImg.map( element => {
          return (
            <div key={`divImg_${element}`} className="flex"
              style={{
              backgroundImage: `url(${element})`,
              height: "300px",
              backgroundSize: "cover",
              backgroundColor: "green",
              backgroundRepeat: "no-repeat"
              }} >
            </div>
          );
        })}
    </>
  );
};

export default Slides;

赞(0）回复(0）举报 2023-06-25

我来回答

css 使用Map函数在React中未显示背景图像

2条答案

相关问题

热门标签

最新问答