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

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.