为什么我的图像没有映射到我的 React 组件？

Question

The title seems to be mapped fine but the images are not. I went over the code a couple of times but I can't find out what's wrong. Let me know what changes I have to make. The author of the tutorial did use class based components and I converted it to functional components but regardless the code should display the images but it isn't.

// directory-data.jsx

export const sections = [
  {
    title: 'hats',
    imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
    id: 1,
    linkUrl: 'shop/hats',
  },

// menu-item.component.jsx

import React from 'react'
import './menu-item.styles.scss'
const MenuItem = ({ title, imageUrl }) => (
  <div
    style={{
      backgroundImage: `url(${imageUrl})`,
    }}
    className='menu-item'
  >
    <div className='content'>
      <h1 className='title'>{title}</h1>
      <span className='subtitle'>Shop Now</span>
    </div>
  </div>
)

export default MenuItem

// directory.component.jsx

import React from 'react'
import { sections } from './directory-data'
import MenuItem from '../menu-item/menu-item.component'
import './directory.styles.scss'

export const Directory = () => {
  return (
    <div className='directory-menu'>
      {sections.map(({ title, imageURL, id }) => (
        <MenuItem key={id} title={title} imageUrl={imageURL} />
      ))}
    </div>
  )
}

// homepage.component.jsx

import React from 'react'
import './hompage.styles.scss'
import { Directory } from '../../components/directory/directory.component'

const Homepage = () => (
  <div className='homepage'>
    <Directory />
  </div>
)

export default Homepage

Answer 1

Your object looks like this:

{
 title: 'hats',
 imageUrl: 'https://i.ibb.co/cvpntL1/hats.png',
 id: 1,
 linkUrl: 'shop/hats',
},

as you can see the property name is imageUrl

in your map function you are trying to take a property named imageURL

{
   sections.map(({ title, imageURL, id }) => (
    <MenuItem key={id} title={title} imageUrl={imageURL} />
 ))}

the fix is change the imageURL to imageUrl when you deconstruct the object