Question

有人可以帮我理解如何使用本地jpg图像代替Semantic UI React中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' },
]

但是此方法仅显示损坏的图像。如果你用实际的url替换那些src链接，那么它们工作得很好。请帮助我了解如何正常显示正常的本地图像。

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

Javascript - 语义UI反应，下拉图标图像

2 个答案: