Javascript - Semantic UI React, Dropdown with icon images

Question

Can someone help me understand how I would use a local jpg image in place of an icon on a Dropdown object in Semantic UI React?

Here is a link to the following dropdown I am using, and how it functions without an icon in place: https://codepen.io/immerhungrig/pen/OboZmN

The semantic docs(https://react.semantic-ui.com/modules/dropdown#dropdown-example-selection) say that my 'options' should have aN image tag, like the following:

const options = [
  { value: 'all', text: 'All', image: { avatar: true, src: '/../resources/image/dog.jpg' },
  { value: 'articles', text: 'Articles', image: { avatar: true, src: '/../resources/image/cat.jpg' },
  { value: 'products', text: 'Products', image: { avatar: true, src: '/../resources/image/bird.jpg' },
]

However this method will only display broken images. If you replace those src links with actual url's then they work just fine. Please help me understand how to have normal local images display properly.

brianespinosa · Accepted Answer · 2018-05-23 13:58:07Z

2

I am guessing you are using Webpack under the hood as your build tool. Webpack needs to know where to put all of the files when it builds your project. It also needs to know if a file is actually used. By declaring a file location relative to your project, that is not going to help you unless you are explicitly including those files to be copied as-is into that same path in the build process.

When working with images and using Webpack, the better thing to do is to declare them with required('RELATIVE_PATH_HERE') that way when Webpack builds your project, it will see that image as required and pull it into the project and feed it through the appropriate loader.

const options = [
  { 
    value : 'all',
    text  : 'All',
    image : { 
      avatar : true,
      src    : require('/../resources/image/dog.jpg'),
    }
  }
]

You can also do one of the following:

// Use the import syntax
import DogImage from '/../resources/image/dog.jpg'

const options = [
  {
    src : DogImage
  }
]

// OR use require() with a constant
const dogImage require('/../resources/image/dog.jpg');

const options = [
  {
    src : dogImage
  }
]

answered May 23, 2018 at 13:58

brianespinosa

2,39114 silver badges22 bronze badges

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

1 Comment

void.massive Over a year ago

Thank you for the thorough explanation! I appreciate the different forms that you demonstrated as well. Either three approaches worked.

cbh6 · Accepted Answer · 2018-05-23 07:36:56Z

1

To access your images yo should place them in a public directory. Seems like your images are inaccesible from your client. Check from navigator if you can access your images with localhost:port/imagesrc and if you can, check the src of your img tag.

If you can access the images, just placing the correct src should work

Supose you now have /public/bird.jpg ...

The src should be now like this:

const options = [
  { value: 'bird', text: 'Birds', image: { avatar: true, src: 'bird.jpg' },
]

answered May 23, 2018 at 7:36

cbh6

1493 bronze badges

Collectives™ on Stack Overflow

Javascript - Semantic UI React, Dropdown with icon images

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related