create-react-app项目图片视频编译后无法正常显示问题求解

问题原因&解决步骤 #

你遇到的静态资源无法显示问题由两处语法错误导致，修改后即可正常显示，无需额外配置webpack： #

1. 修正Data.js的img属性赋值

你当前对img字段的赋值存在两处错误：

• 额外给import后的图片变量套了一层花括号，实际传递给组件的是对象而非图片路径
• 混用import和require语法，无需重复引入资源
  修改后的Data.js核心代码如下：

import reactImage from '../assets/images/react.svg'
import reactImg2 from '../assets/images/draw_and_publish.png'

export const homeObjOne = {
    // 其余原有属性保持不变
    img: reactImage, // 直接使用import导入的变量，无需require
    // 其余原有属性保持不变
}

export const homeObjTwo = {
    // 其余原有属性保持不变
    img: reactImage, // 去掉外层包裹的花括号
    // 其余原有属性保持不变
}

export const homeObjThree = {
    // 其余原有属性保持不变
    img: reactImg2, // 去掉外层包裹的花括号
    // 其余原有属性保持不变
}

2. 修正InfoElements中的Img组件类型

你当前将Img定义为了div标签，div原生不支持src、alt属性，无法渲染图片，需要修改为img标签：

// 把原来的styled.div改为styled.img即可
export const Img = styled.img`
width: 100%;
margin: 0 0 10px 0;
padding: 0;
`

修改完成后重新运行npm start即可正常加载图片资源，create-react-app默认已配置好静态资源打包规则，无需自行配置file-loader/url-loader，自行修改配置反而可能引发兼容问题。

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