javascript - React-create-library 导入图片问题

Question

我正在使用 create-react-library 创建新项目但是当我尝试使用 import logo from './logo.png' 导入图像时，图像没有显示在示例中，但是如果我使用 import logo from 'logo.png ' 显示图像。

我的问题是这通常会发生吗？

这是我项目的文件夹结构

not working version

result

代码:

import React from 'react'
import styles from './styles.module.css'
import logo from './logo.png'

export const ExampleComponent = ({ text }) => {
  return (
    <div className={styles.test}>
      {/* Example Component: {text} */}
      <img src={logo} />
    </div>
  )
}

working version

result

代码:

import React from 'react'
import styles from './styles.module.css'
import logo from 'logo.png'

export const ExampleComponent = ({ text }) => {
  return (
    <div className={styles.test}>
      {/* Example Component: {text} */}
      <img src={logo} />
    </div>
  )
}

Answer 1

您好，我也是 react-create-library 的新手，遇到了同样的问题。我的图像位于文件夹 src/assets/img 中，当我尝试相对添加路径时失败了。我发现路径应该在 ./src/文件夹之后。以下是对 src/assets/img 文件夹中的图标适用的代码。

import * as React from 'react';
import styles from './styles.module.css';
import warnicon from 'assets/img/warning.png';
.
.
.
<div className={styles.modalBody}>
    <img src={warnicon} alt='warn-icon'></img>
    <p className={styles.warning}>{props.text}</p>
</div>

谢谢。