无法动态添加本地图像

Question

我正在尝试动态添加图像以进行响应。

我遵循了这个关于stackoverflow的程序 Dynamically Loading Local Images with ReactJS

但是它抛出了我的错误，说找不到模块。

import React from 'react'
import OpeningImage from "./../../images/printing.jpg"
import './ServiceOpeningContent.css'
const images = require.context('./../../images', true);


const serviceOpeningContent  = (props) => {
    const images = require.context('./../../images', true);
    console.log(images)
    const image = images("/" + props.image)

    return (
        <div className="opening-content-overlay">
            <div class="service-opening-content"> 
                <img src={OpeningImage}  className="service-opening-content-image"/>
                <h2 className="service-opening-content-heading">Printing Section </h2> 
            </div>
        </div>
    )
}

export default serviceOpeningContent;

在上面的模块中，我有意手动import OpeningImage from "./../../images/printing.jpg"导入了一个图像，并且该图像可以正常工作，因此有些信息告诉我图像const images = require.context('./../../images', true);的目录是正确的。

props.image正在传递printing.jpg，并且抛出的错误是

  

错误：找不到模块错误：找不到模块'/printing.jpg'。

  <ServiceOpeningContent 
                     image="printing.jpg" />

谁能告诉我我做错了什么，或者我如何直接在反应中传递图像？