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

Question

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.

Answer 1

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.