React-create-library Import Image Issue

user_14105259 0
Viewed 775

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>
  )
}
reactjs javascript
2 Answers

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.

user_78449630

yes it is normally the way it happens. Although adding your code would have helped but I have added an example:-

 import React from 'react';
 import logo from './logo.png'; 
 console.log(logo); // /logo.84287d09.png
 function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
user_138728320
Related