SPFx React项目Web Part资源文件夹图片无法加载求助

云上老周

2026-6-12

解决SPFx 1.21.1 React组件中图片无法加载的问题

方案一：直接导入图片资源（推荐）

SPFx的打包工具（webpack）支持直接导入静态资源，这种方式会自动处理路径映射，避免手动计算相对路径出错。修改组件代码如下：

import * as React from 'react';
// 直接导入图片文件
import downloadImage from '../../webparts/contosoProject/assets/image/download.jpg';

const Administration = () => {
    return (
        <div>
            <img src={downloadImage} alt="自定义图片描述" />
        </div>
    )
}

export default Administration;

方案二：确认路径正确性并配置静态资源

如果坚持使用require，需确保以下两点：

检查相对路径是否准确：确认组件文件所在目录到图片文件的层级关系，文件名（包括大小写）完全匹配（Linux环境下大小写敏感）
配置静态资源包含：在config/config.json中添加静态资源目录，确保打包工具能识别并处理图片文件：

{
  "staticAssets": {
    "include": [
      "src/webparts/contosoProject/assets/**/*"
    ]
  }
}

修改后执行gulp clean && gulp serve清除缓存并重新启动服务。

方案三：使用SPComponentLoader加载图片

对于动态加载场景，可借助SPFx提供的SPComponentLoader获取正确的资源URL：

import * as React from 'react';
import { SPComponentLoader } from '@microsoft/sp-loader';

const Administration = () => {
    // 基于webpart部署路径解析图片URL
    const imageUrl = SPComponentLoader.getUrl('/webparts/contosoProject/assets/image/download.jpg');
    
    return (
        <div>
            <img src={imageUrl} alt="自定义图片描述" />
        </div>
    )
}

export default Administration;