React引入类组件后本地background-image图片无法加载如何解决？

• 问题原因
  你当前使用的slider-media/images/logreg-bg.jpg是相对路径，React打包运行时，该路径会相对于当前页面URL解析，而非组件文件的存放路径，导致无法匹配到实际的静态资源地址。
• 方案1：将图片存放在public目录（适合大量静态资源引用场景）
  如果你用的是create-react-app等标准React脚手架，public文件夹下的所有资源会被直接复制到打包后的根目录，你可以：

1. 把slider-media文件夹整体放到项目根目录的public文件夹下
2. 修改state中的图片路径，开头添加斜杠表示从项目根路径寻址：

this.state = {
  images: [
    "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/canyon.jpg",
    "/slider-media/images/logreg-bg.jpg",
  ],
  currentIndex: 0,
  translateValue: 0
}

• 方案2：通过import引入图片（适合少量业务组件内图片场景）
  如果图片存放在src目录下，必须通过import让webpack处理路径解析：

1. 在组件顶部添加图片引入，路径替换为你本地图片相对于当前组件文件的实际路径：

import React from 'react'
import './slider.css'
// 新增图片引入
import logregBg from './你的图片存放路径/logreg-bg.jpg'

2. 直接将引入的变量放到images数组中：

this.state = {
  images: [
    "https://s3.us-east-2.amazonaws.com/dzuz14/thumbnails/canyon.jpg",
    logregBg,
  ],
  currentIndex: 0,
  translateValue: 0
}

• 快速排查方法
  打开浏览器开发者工具的「网络」标签，刷新页面后找到logreg-bg.jpg的请求，查看实际请求的URL和你本地文件的存放路径是否匹配，即可快速定位路径错误点。

内容的提问来源于stack exchange，提问作者n33t