React项目-引入本地资源

问题背景

          {videoData.map((video) => (
            <Col xs={24} sm={12} md={6} lg={6} xl={6}>
              <Card
                // loading={true}
                hoverable
                cover={
                  <video
                    muted
                    preload="metadata"
                    style={{ width: '100%', height: 'auto' }}
                  >
                    <source src={video.videoPath} type="video/mp4" />
                  </video>
                }
                styles={{ body: { padding: '12px' } }}
              >
                <Text strong style={{ fontSize: '14px' }}>
                  {video.title}
                </Text>
              </Card>
            </Col>
          ))}

const videoData = [
  {
    id: 1,
    title: '髋关节慢性疼痛的基本原理',
    videoPath: require('@/assets/video/exerciseVideo.MP4')
  },
  ...
]

正常src='路径名'

但引入视频路径不能直接写 '路径名' ，也不能直接写 路径名

而是要用require或者import

在React项目中，使用require()来引入本地资源（如图片、视频等）而不是直接写路径，主要有以下几个原因：

1. Webpack打包处理

React项目通常使用Webpack作为构建工具，require()是Webpack的模块化引入方式：

• Webpack会解析require()语句
• 将资源文件处理后放入构建目录
• 返回最终的文件访问路径（可能会包含hash值等）

2. 路径转换

直接写"@/assets/video/huqiu.MP4"时：

• @/是webpack配置的路径别名（通常指向src目录）
• Webpack无法直接识别这种别名写法
• 使用require()可以确保路径别名被正确解析

3. 文件指纹和缓存

使用require()可以让Webpack：

• 给文件添加hash指纹（如huqiu.abc123.mp4）
• 实现更好的缓存策略
• 避免浏览器缓存问题

4. 错误检查

require()会在编译时：

• 检查文件是否存在
• 如果文件不存在会直接报错
• 比运行时才发现文件找不到更好

5. 动态加载

虽然这里不是动态加载，但require()为将来可能的动态加载提供了可能性

为什么不能直接写字符串路径？

直接写"@/assets/video/huqiu.MP4"时：

1. 在JSX中这个路径不会被Webpack处理
2. 最终路径可能不正确（特别是部署时）
3. 失去了Webpack提供的所有优化

最佳实践建议

// 方法1：使用import
import huqiuVideo from '@/assets/video/huqiu.MP4';

{
  id: 1,
  title: '髋关节慢性疼痛的基本原理',
  videoPath: huqiuVideo
}

// 方法2：使用require
{
  id: 1,
  title: '髋关节慢性疼痛的基本原理',
  videoPath: require('@/assets/video/huqiu.MP4')
}