Semantic UI React Dropdown：如何用本地JPG图片替代图标？

我来帮你搞定这个本地图片显示破损的问题～ 其实核心原因是React项目里静态资源的引用规则和普通HTML不一样，直接写相对路径会找不到文件，咱们一步步来解决：

一、先明确本地图片的存放位置 #

React项目里静态资源一般有两种存放方式，对应不同的引用方法：

1. 图片放在public文件夹下 #

如果你的图片放在项目根目录的public文件夹里（比如public/images/dog.jpg），那你需要用绝对路径来引用：

const options = [
  {
    value: 'all',
    text: 'All',
    image: { avatar: true, src: '/images/dog.jpg' }
  },
  {
    value: 'articles',
    text: 'Articles',
    image: { avatar: true, src: '/images/cat.jpg' }
  },
  {
    value: 'products',
    text: 'Products',
    image: { avatar: true, src: '/images/bird.jpg' }
  }
]

这里的/images/dog.jpg对应的是public文件夹下的images/dog.jpg，因为public是React项目的静态资源根目录，打包后会直接保留这个结构。

2. 图片放在src目录下（比如src/assets/images） #

如果图片放在src文件夹里，你需要先import图片文件，让Webpack帮你处理路径：

// 先导入图片
import dogImg from './assets/images/dog.jpg'
import catImg from './assets/images/cat.jpg'
import birdImg from './assets/images/bird.jpg'

// 然后在options里使用导入的变量
const options = [
  {
    value: 'all',
    text: 'All',
    image: { avatar: true, src: dogImg }
  },
  {
    value: 'articles',
    text: 'Articles',
    image: { avatar: true, src: catImg }
  },
  {
    value: 'products',
    text: 'Products',
    image: { avatar: true, src: birdImg }
  }
]

这种方式下，Webpack会在打包时把图片复制到输出目录，并生成正确的URL，避免路径错误。

二、为什么之前的路径会失效？ #

你之前写的/../resources/image/dog.jpg这种相对路径，在React项目里是不生效的：

• React打包后，所有src里的文件都会被编译处理，原来的相对路径结构会被改变
• 直接写这种路径，浏览器会从当前页面的URL去解析，自然找不到本地文件

三、额外检查项 #

• 确认图片文件名和路径的大小写（如果部署在Linux服务器上，大小写不匹配会找不到文件）
• 确认图片文件确实存在于你指定的位置，没有拼写错误
• 如果用的是Create React App，不要修改public文件夹的默认配置，否则可能导致路径异常

内容的提问来源于stack exchange，提问作者void.massive