create-react-app项目如何导入树莓派NAS存储中的图片及图片文件夹

直接使用SMB路径//pivault/Seagate/images/DSC00014.jpg无法导入有两个核心原因：

1. create-react-app的import导入是构建阶段由Node.js处理的，默认仅能读取项目本地文件系统内的资源，无法直接访问SMB网络共享路径
2. 现代浏览器有安全策略限制，禁止直接加载SMB协议的资源，就算硬编码路径到img标签也会被拦截

方案1（推荐）：NAS端暴露HTTP静态资源服务，前端直接通过URL引用 #

这个方案最灵活，不需要修改CRA配置，也支持批量加载整个文件夹的图片

• 第一步：在树莓派上部署轻量静态服务，指向NAS的images目录
  可以直接用Python自带的HTTP服务（不需要额外安装依赖），进入NAS对应images目录的挂载路径，执行命令：

  python3 -m http.server 8090
  

  也可以用Nginx配置静态资源站点，指向对应目录即可，端口可自行修改为未被占用的端口，同时确保树莓派防火墙开放该端口的局域网访问权限。
• 第二步：React代码中直接通过URL引用图片，不需要用import
  假设树莓派的局域网IP是192.168.1.100，img标签直接写：

  <img src="http://192.168.1.100:8090/DSC00014.jpg" alt="图片" />
  

• 批量加载整个文件夹的实现：
  给静态服务开启目录遍历权限（Python的http.server默认开启），前端通过fetch请求http://192.168.1.100:8090拿到目录下所有图片文件名，遍历生成img标签即可完成批量加载。

方案2：挂载SMB共享到本地，通过import导入 #

如果必须使用import的方式引入资源，可以通过挂载网络驱动器的方式实现：

• 第一步：在Windows开发/构建设备上，将\\pivault\Seagate\images映射为网络驱动器，比如分配盘符为Z:
• 第二步：安装@craco/craco修改CRA的默认webpack配置，添加路径别名指向挂载的驱动器：
  在craco.config.js中添加配置：

  const path = require('path');
  module.exports = {
    webpack: {
      alias: {
        '@nas-images': path.resolve('Z:/')
      }
    }
  }
  

• 第三步：代码中直接导入对应图片即可：

  import image1 from "@nas-images/DSC00014.jpg";
  

  注意：该方案仅在构建设备挂载了对应网络驱动器的前提下生效，更换构建设备需要重新挂载相同路径。

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