React-create-library Import Image Issue

Question

I am creating new project using create-react-library but when I tried to import image using import logo from './logo.png', the image does not show up in the example, but if I use import logo from 'logo.png' the image show up.

My question is this normally happen?

here is the folder structure of my project

not working version

result

code:

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

code:

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

Hi I am also new with react-create-library and was having the same problem. My image was in the folder src/assets/img and when I was trying to add the path relatively it was failing. What i found is path should be after the ./src/ folder. following is the code that worked for me for the icon in src/assets/img folder.

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>

Thank you.