javascript - 如何在 React 中使用导入的图像？

Question

我已经在 React 中编程了很短的时间，我对如何继续有一些疑问。
我有一个组件将导入的 svg 显示为图像。

import Arrow from '../arrow.svg';


    if (!isChecked) {

      config.email = {
        clickable: true,
        image: Arrow,
        onClick: () =>
          inProfile
            ? dispatch(notification(CHANGE_STATUS))
            : browserHistory.push(/checkOut),
      };
    }

现在我想用从外部库导入的图像替换项目中的图像，该图像呈现如下

<Img type="right-arrow" />

这是一个现在在我的代码中工作的例子

  renderImage() {
    return <Img type="right-arrow" />;
  }

  render() {

    return(
      {this.renderHeader}
      {this.renderTitle}
      {this.renderBody}
      {this.renderImage}
    );

  }

如何使用这个新导入的组件而不是以前使用的图像？
我尝试了几种方法，但无法渲染。
我尝试过的最后一件事是以下内容

import Image from '@market/image-market';


    if (!isChecked) {

      config.email = {
        clickable: true,
        image: <Img type="right-arrow" />
        onClick: () =>
          inProfile
            ? dispatch(notification(CHANGE_STATUS))
            : browserHistory.push(/checkOut),
      };
    }

我不知道如何在这个结构中使用它。如果有人能看到我的错误。非常感谢您的时间和帮助

Answer 1

我认为你只是对引擎盖下发生的事情有点困惑。

如果config.emailAddress.image像这样使用

<>
  {config.emailAddress.image}
</>

你应该通过 image: <Img type="right-arrow" />而不是声明一个函数。

现在，与 image: () => <Img type="right-arrow" /> ，您将不得不调用该函数来呈现组件。

<>
  {config.emailAddress.image()}
</>

我认为第一种方法总是更容易。
这也应该有助于您理解为什么可以如此轻松地加载 SVG。

SVGs can be imported and used directly as a React component in your React code. The image is not loaded as a separate file, instead, it’s rendered along the HTML.

见 this stackoverflow answer实现细则。