Javascript

Question

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

这是我正在使用的以下下拉菜单的 link，以及它在没有适当位置图标的情况下如何工作：https://codepen.io/immerhungrig/pen/OboZmN

语义文档 (https://react.semantic-ui.com/modules/dropdown#dropdown-example-selection) 说我的 'options' 应该有一个图像标签，如下所示：

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 links 替换为实际的 urls 那么它们就可以正常工作。请帮助我了解如何正确显示正常的本地图像。

Answer 1

要访问您的图像，您应该将它们放在 public 目录中。似乎您的客户无法访问您的图片。从导航器检查您是否可以使用 localhost:port/imagesrc 访问您的图像，如果可以，请检查您的 img 标签的 src。

如果您可以访问图片，只需放置正确的 src 就可以了

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

src 现在应该是这样的：

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

Answer 2

我猜您在后台使用 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
  }
]

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

Javascript - Semantic UI React, Dropdown with icon images

reactjs

semantic-ui-react