javascriptnode.jsreactjswebpackurlloader

Unable to load static image with react@16.4.2 component with webpack

I am trying load static image in my component named as Top.js so i have import image like below in Top.js:

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

path for logo.png is frontend/src/images/logo.png .
After that i am trying to use this in my JSX in component like below:

<img src="{logo}" alt="Homepage" />

Component is loading successfully but it is not showing logo image. By following solution for similar kind of issues i have setup webpack configurations as well but it's still not working.

Here is my webpack configuration for dev environment.

path for webpack inside my root directory is as follow:

`frontend/node_module/react-scripts/config/webpack.config.dev.js`

by following the link i did changes in config as :

test: /\.(pdf|jpg|png|gif|svg|ico)$/,
            use: [
                {
                    loader: 'url-loader'
                },
            ]

After that i started my app again with npm start and it started successfull but logo image is not showing.

I am using react@16.4.2 for frontend with Koa.js backend and node@10.8.0

Solution

  • JavaScript expressions can be used inside of JSX. We just need to wrap it with curly brackets {}, but you are making it a String by wrapping them like this "{}". Remove the "" and it will work like a charm:

    <img src={logo} alt="Homepage" />

    JSX In Depth.