CODEWITHSUNDEEP
reactjscreate-react-appsemantic-ui-react
kingkong
kingkong

Reputation: 117

Image in Semantic UI not working in create-react-app

I have included this already in my index.html. 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

Still no images are displayed.I have for example tech.png in my src folder which contains Sample.js and index.js files.

Here is my Sample.js file:

import React from 'react';
import { Image} from 'semantic-ui-react';
import {Link} from 'react-router-dom';


export default class Sample extends React.Component {
 render(){
   return(
    <Image src='./src/tech.png' href as={Link} to="/Users"/>
   );

 }

Help me to render the image.

Upvotes: 0

Views: 2269

Answers (2)

Fabian5150
Fabian5150

Reputation: 58

I was confused about this too, as the image link of an example in the semantic ui docs looked similiar to yours:

const ImageExampleImage = () => (
  <Image src='/images/wireframe/image.png' size='small' />
)

So I looked the example up on their GitHub, turns out if you want to link to images like that, you have to put them in the public directory of your create-react-app project, then it works.

Upvotes: 0

brianespinosa
brianespinosa

Reputation: 2408

This should not be a CSS issue. If the CSS was not installed, the markup would still render an img tag with the correct source to display the image. I think what is probably happening is your image is not actually getting included in the build when Webpack runs. By default the /src folder is not getting automatically included into any builds in create-react-app.

For the image to be included you must require() like this:

<Image
  as={Link}
  src={require('./src/tech.png')}
  to='/Users'
/>

That will allow you to reference your image relative to your React component. This isn't an issue with semantic-ui-react.

Upvotes: 4

Related Questions