无法加载通过webpack-image-loader动态导入并从JSON文件调用的图像

Question

我正在尝试从JSON文件动态加载一些图像，我正在使用webpack-image-loader并做出反应。

为此，我使用了几种png格式，当我将变量名放在花括号中时，它可以工作：

import gratuita from 'images/gift-50.png';

<img src={gratuita} className="pool-icons"/>

但是，当我尝试借助JSON文件执行此操作时，问题就来了。

我正在如下所示导入webpack-image-loader的帮助下导入图像（png）：

import Baseball from 'images/BaseballBall-50.png';

然后，我调用我的图片并使用JSON属性来调用以下示例中所示的正确文件：

<img src={sport.name} className="pool-icons"/>

JSON文件具有下一个数据结构：

"sport": {
        "id": 4,
        "name": "Baseball"
      },

然后，当调用img时，图像不显示，并且src文件没有将变量解析为src路由，相反，它只是获得了变量的名称，如下所示： 图像没有出现，

我用eval（）尝试过，但是没有用，这引发了我这个错误：

Uncaught (in promise) ReferenceError: Baseball is not defined
at eval (eval at DisplaySport (eval at <anonymous> (output.js:5211)), <anonymous>:1:1)
at DisplaySport (eval at <anonymous> (output.js:5211), <anonymous>:247:13)
at eval (eval at <anonymous> (output.js:7605), <anonymous>:306:16)
at measureLifeCyclePerf (eval at <anonymous> (output.js:7605), <anonymous>:75:12)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (eval at <anonymous> (output.js:7605), <anonymous>:305:14)
at ReactCompositeComponentWrapper._constructComponent (eval at <anonymous> (output.js:7605), <anonymous>:280:21)
at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (output.js:7605), <anonymous>:188:21)
at Object.mountComponent (eval at <anonymous> (output.js:1396), <anonymous>:46:35)
at ReactDOMComponent.mountChildren (eval at <anonymous> (output.js:7917), <anonymous>:238:44)
at ReactDOMComponent._createInitialChildren (eval at <anonymous> (output.js:7629), <anonymous>:697:32)

在此先感谢您，我将停留在这一部分，这对社区有所帮助。

Answer 1

尝试使用条件检查运动名称是否与“棒球”匹配，

 const Baseball = "https://s-media-cache-ak0.pinimg.com/originals/20/56/e1/2056e16bbc03d5eb41b4761356a8411b.jpg" const sport={ id: "1", name: "Baseball" } class App extends React.Component{ render(){ const name = sport.name return( <div> {sport.name === "Baseball" && <img src={Baseball} />} </div> ) } } ReactDOM.render(<App />, document.getElementById("app")) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>