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.

You have just the CSS in CDN, has the semantic library been installed since Image is a component? — Akhilesh krishnan
– Akhilesh krishnan, Commented Mar 2, 2018 at 7:18

brianespinosa · Accepted Answer · 2018-03-02 15:47:10Z

4

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.

answered Mar 2, 2018 at 15:47

brianespinosa

2,39114 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabian5150 · Accepted Answer · 2022-07-30 16:06:39Z

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.

answered Jul 30, 2022 at 16:06

Fabian5150

836 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related