ReactJS：图像无法渲染

Question

我正在尝试从src目录下的images文件夹中渲染静态图像，但是，如果我尝试直接导入任何图像，然后在jsx中传递images声明中的注释部分，则不会渲染可以正常渲染，也可以尝试使用CSS的backgroundImage属性，但不渲染任何内容。

import React, { Component } from 'react';
import Pizza from './components/pizza';
import './App.css';



class App extends Component {

  state = {
    open: false,
    active: null,
    categories: []
  }

  componentDidMount() {
    this.setState({
      categories
    })
  }

  render() {
    return (
      <div className="App">
        <Pizza data={this.state}/>
      </div>
    );
  }
}


const categories = [
  {"title":"Italian Pizza","link":"../images/italian-pizza.jpg",
   "id":"586537da62981d5fb8c21617", 
   "details": "aksnflafiafoasofhafhoahfohaofhoahfhashfohasfhofhahsofohahosf"}
];

export default App;

pizza.js

import React from 'react';
import PropTypes from 'prop-types';
import italian from '../images/italian-pizza.jpg'

const Pizza = ({data}) => {
  const images = data.categories.map((d,i) => {
    return (
      <div key={i}>
        {/* <img src={italian} /> */}
        <img src={`${d.link}`} />
      </div>
    )
  });


  return (
    <div className="pizza">
      <header className="header">Pizza</header>
      <div className="main">
        {data.categories.map((category, index) => {
          return (
            <div key={index}>
              <ul className="items">
                {images}
                {/* <li  style={{backgroundImage: `url(require(italian))`}} /> */}
              </ul>              
            </div>
          )
        })}
      </div>
    </div>
   )
}


Pizza.propTypes = {
  categories: PropTypes.array,
  open: PropTypes.bool,
  active: PropTypes.bool
}



export default Pizza;