CODEWITHSUNDEEP
javascripthtmlreactjsmeteor
Poh Zi How
Poh Zi How

Reputation: 1569

How do I include an `<img>` in ReactJS?

I have tried numerous ways based on various answers, But I can't seem to get this to work.

I have the file structure as follows:

-client
--components
---thecomponent.js //the file
--img
---small.png //the image

Inside thecomponent.js

// all these don't work
<button><img src={require("../img/small.png")}/></button>
<button><img src={"../img/small.png"}/></button>
<button><img src="../img/small.png"/></button>

Any help is greatly appreciated!

EDIT: I have tried every suggestion provided. Looks like I am in the correct direction, but I am still getting the same error when using require. It says:

Cannot find module '/public/img/small.png' at require (modules-runtime.js?hash=0969a31…:133)

Any ideas?

EDIT2: I've found the problem. Actually I am using meteor-react, not pure react, and therefore am asking the wrong question. Both paqash and Rishabh are right about the answer, but in meteor the "public/" word as to be dropped when referencing, as stated in their documentation:

All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as . This is the best place for favicon.ico, robots.txt, and similar files.

Upvotes: 1

Views: 665

Answers (2)

Rishabh
Rishabh

Reputation: 1205

You should load images from the http server with absolute path and not via relative. You can also use a CDN to host images.

add a public directory and then load image like <img src="/public/img/small.png" />

-client
--components
---thecomponent.js //the file
-public
--img
---small.png
-index.html

Upvotes: 1

paqash
paqash

Reputation: 2314

var small = require('../img/small.png')

<img src={small} />

This works for me

Upvotes: 3

Related Questions