Home » Javascript » Javascript – Semantic UI React, Dropdown with icon images

Javascript – Semantic UI React, Dropdown with icon images

Posted by: admin August 19, 2018 Leave a comment

Questions:

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.

Answers: