CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackurlloader
Jitendra
Jitendra

Reputation: 3185

Unable to load static image with [email protected] 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 [email protected] for frontend with Koa.js backend and [email protected]

Upvotes: 0

Views: 175

Answers (1)

Sookie Singh
Sookie Singh

Reputation: 1623

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.

Upvotes: 1

Related Questions