CODEWITHSUNDEEP
reactjs
Martin Erlic
Martin Erlic

Reputation: 5667

Can't show image in my ReactJs application

return (
    <Card>
      <CardHeader
      title="Full Name"
      subtitle="@username"
      avatar="./../assets/img/image.gif" />
      <CardText expandable>
        <div>
          <p>{message}</p>
        </div>
        <div>
          {tagElements}
        </div>
      </CardText>
    </Card>
  );
};

Folder structure:

- app
-- assets
--- img
---- image.gif
-- src

Do I need to import something on every js file where I would like to show images? Why can't I just point to the folder where it's located and just show it? What am I missing?

Upvotes: 0

Views: 456

Answers (2)

Saeid
Saeid

Reputation: 2036

You have to import your image and then use it. It is enough to add the image path in your js file header. Example:

import myimage from 'XXX/images/x.png';

Then you have to show it like that:

 <div className="myimage">
    <img src={myimage}  />
 </div>

Let me know if it is works for you.

Upvotes: 0

amandala
amandala

Reputation: 15

In the CardHeader component you will need to import the Image component from react native and supply the uri prop to that component to render. Here is the documentation for image

import {Image} from 'react-naitve'

One gotcha with react native is that you need to provide explicit width and height to the image in order for it to render. Otherwise it appears as 0x0.

So something like this within your CardHeader would work:

<Image style={{width: 50, height: 50}} source={{uri: props.avatar}} />

Upvotes: 1

Related Questions