Question 192435 in Html Question posted in
Some basic documentation can be found here.

Html – Background Image not Showing in React using Map function

I have a slide component that I want to use to create a carousel in React. I want to use the images in the public/images folder as background images for the carousel. I created an array of objects where the image is stored in the "backgroundImage" property as shown in the code:

    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,
     }
]

In the slide component, I created a map function to extract the image from the array and save it in a variable "featImg" as shown in the code below:

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;

When I start the server (npm start), the background images are not showing in the browser.
Using the inspection tool, the image is showing as strings like so,
background-image: url("images/img_1.jpg,images/img_2.jpg,images/img_3.jpg");
Instead of showing the actual background images.

Please what did I do wrong in the code, I need some corrections please.

Tags:

2

Answers


  1. 0

    This is happening because you are passing featImg as background-image. featImg is an array of image url(s). You need to pass an element of the array like: featImg[0]. And if you are trying to put multiple backgrounds in a single div, you can not do that.

    If you want to create multiple div(s) with background images from array featImg, You could use something like:

    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;
    Login or Signup to reply.
  2. 0

    You have a small misunderstanding of how map works. At the moment you’re mapping over the array of objects and returning a new array of background image names. You’re then applying that array to one element that you’re returning from the component.

    What you should be doing is including the creation of that element within the map process so that on each iteration a new element is created with the background image name of that current iterated object.

    And then you return the whole array of newly-created elements from the component.

    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;

    Note: depending on how you call the this component you may want to wrap this returned code in a parent element:

    const Slides = () => {
  return (
    <div class="slideWrapper">
      {featured.map(feat => {
        ...
      })}
    </div>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search