Javascript - Semantic UI React, выпадающий с изображениями иконок

Question

Может ли кто-нибудь помочь мне понять, как я использовал бы локальное изображение jpg вместо значка на объекте Dropdown в Semantic UI React?

Вот ссылка на следующий раскрывающийся список, который я использую, и какон работает без иконки: https://codepen.io/immerhungrig/pen/OboZmN

Семантические документы (https://react.semantic -ui.com / modules / dropdown # dropdown-example-selection ) говорят, что мои 'опции'должен иметь тег изображения N, как показано ниже:

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' },
]

Однако этот метод будет отображать только поврежденные изображения.Если вы замените эти ссылки src реальными URL-адресами, они будут работать нормально.Пожалуйста, помогите мне понять, как правильно отображать обычные локальные изображения.

Answer 1

Я предполагаю, что вы используете Webpack под капотом в качестве инструмента для сборки.Webpack должен знать, куда поместить все файлы при сборке вашего проекта.Также необходимо знать, действительно ли файл используется.Объявляя местоположение файла относительно вашего проекта, это не поможет вам, если вы явно не включите те файлы, которые будут скопированы как есть, в тот же путь в процессе сборки.

При работе с изображениями ииспользуя Webpack, лучше всего объявить их с помощью required('RELATIVE_PATH_HERE') таким образом, когда Webpack строит ваш проект, он будет видеть это изображение по мере необходимости, вытягивать его в проект и передавать его через соответствующий загрузчик.

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

Вы также можете выполнить одно из следующих действий:

// 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
  }
]

Answer 2

Чтобы получить доступ к вашим изображениям, вы должны поместить их в публичный каталог.Похоже, ваши изображения недоступны для вашего клиента.Проверьте в навигаторе, можете ли вы получить доступ к вашим изображениям с помощью localhost:port/imagesrc, и если можете, проверьте src вашего тега img.

Если вы можете получить доступ к изображениям, просто установка правильного src должна работать

Предположим, у вас теперь есть /public/bird.jpg ...

Теперь src должен быть таким:

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