Javascript-语义UI React，带有图标图像的下拉菜单

Question

有人可以帮助我了解如何在语义UI React中使用本地jpg图像代替Dropdown对象上的图标吗？

这是指向我正在使用的以下下拉列表的链接，以及在没有图标的情况下它如何运行： 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时，更好的方法是使用Webpack生成项目时以required('RELATIVE_PATH_HERE')声明它们，这样它将看到所需的图像并将其拉入项目并通过合适的装载机。

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访问图像，如果可以，请检查img标记的src。

如果您可以访问图像，则只需放置正确的src即可

假设您现在拥有/public/bird.jpg ...

src现在应该像这样：

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