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

我认为您只是对幕后发生的事情感到有点困惑。

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了解实现细节。