How do I import an image in to react Im using rails 7

Question

ERROR] Could not resolve "logo.png" │ import logo from 'logo.png' 08:55:46 js.1 | ╵

import logo from './logo.png'

import logo from './images/logo.png'

import logo from '../images/logo.png'

import logo from './images/logo'

I keep getting: could not resolve as an issue for the import

Expecting the image to render in react

Answer 1

In package.json:

in the scripts section, add --loader:.png=file to the following line:

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",

ex:

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --loader:.png=file",

This will allow you to load png files.

Then in jsx you can just import and use your image like normal:

ex.

import React from 'react'
import Image from '../path/to/your/image.png'

export default () => (
  <img src={Image} />
)

See here for more information.

Answer 2

I setup rails react on rails instead and with web packer its very simple to import images