Webpack构建Google Maps库时SVG加载失败求助

先明确核心排查方向 #

先从路径配置和Google Maps Marker的必填参数入手，这是最容易踩坑的点：

1. 修正Webpack配置（以asset/resource为例） #

确保SVG规则无冲突，同时设置合理的publicPath和资源输出路径：

module.exports = {
  module: {
    rules: [
      // 只保留这一条SVG规则，删除其他冲突的loader（比如svg-loader、file-loader）
      {
        test: /\.svg$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name].[contenthash][ext]' // 输出到dist/assets目录
        }
      }
    ]
  },
  output: {
    // 库开发场景下，设为相对路径适配不同部署环境
    publicPath: './',
    // 其他输出配置（比如library、filename等）保持你的原有设置
  }
};

2. 代码中正确引用与使用SVG #

引入SVG文件

// src/component/index.ts
import markerIconUrl from './icon_marker.svg';

给Google Maps Marker设置图标

必须添加scaledSize参数，否则SVG会因尺寸不识别而不显示：

const marker = new google.maps.Marker({
  position: { lat: -34.397, lng: 150.644 },
  map: yourMapInstance, // 确保map实例已正确初始化
  icon: {
    url: markerIconUrl,
    scaledSize: new google.maps.Size(40, 40), // 按需调整尺寸
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(20, 40) // 可选，调整图标锚点位置
  }
});

给img元素设置src

原生JS或框架中直接使用即可：

// 原生JS示例
const img = document.createElement('img');
img.src = markerIconUrl;
img.alt = 'Marker';
document.body.appendChild(img);

// React/Vue等框架示例（以React为例）
// <img src={markerIconUrl} alt="Marker" />

3. 排查验证步骤 #

• 打开浏览器控制台的网络面板，搜索icon_marker，确认SVG文件的请求状态：
  • 如果是404：检查dist中生成的SVG路径，对比页面中实际请求的路径，调整Webpack的publicPath或generator.filename
  • 如果请求成功但不显示：检查SVG文件本身是否有效（直接在浏览器打开dist中的SVG文件看能否正常显示）
• 临时切换为asset/inline规则（将SVG转为base64），排除路径问题：

  {
    test: /\.svg$/i,
    type: 'asset/inline',
  }
  

  此时引入的markerIconUrl是base64字符串，直接给Marker和img使用，如果能显示，说明之前的路径配置有问题。

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