1

I am a newbie in reactjs and still learning.

I have been trying to load an external image in reactjs, using the following code

Module not found: Can't resolve 'https://www.example.com/logo.png' in '/Users/admin/website1/website/src'

My code is as follows:

<div className="profile-userpic">
    <img src="https://www.example.com/logo.png" /> 
</div>

where as an image in local storage loads successfully

<div className="profile-userpic">
        <img src={require('./images/me-icon.png')} />
  </div>
Adeel Imran
  • 13,166
  • 8
  • 62
  • 77
karan
  • 313
  • 2
  • 3
  • 20
  • 2
    I would say, that this is a webpack / loader issue. Not related to react directly, could you post your `webpack.config.js` file? – webdeb Oct 04 '17 at 11:33

2 Answers2

0

you are probably using a pre-processor that is attempting to extract the images from your components.

If that is the case then you may need to add the assets directory to your configuration. You can find webpack's guide on images here, in case that's the tool you are using.

otherwise, provide more context.

jenriquer
  • 166
  • 2
-3

Your <img/> is not really a DOM element so just giving it a string won't work. It's a JSX attribute expression so you need curly braces around the actual string for it to work.

A similar question has been answered here: https://stackoverflow.com/a/26065890

damm123
  • 41
  • 3
  • Strings as source are fine most of the time, the error of the OP says `Can't resolve `, which means its trying to resolve the `src` property, which leads to the conclusion, that there is some loader in between. – webdeb Oct 04 '17 at 11:37