调用Google Map API获取照片时出现404错误求助

你这是踩了个很容易忽略的小坑——手动给getUrl()返回的图片URL加了.png后缀，直接导致了404错误。

先看你代码里的问题核心：

const url = `${p.getUrl(cfg)}.png` // 这里多了不必要的.png后缀！

Google Places API的photo.getUrl()方法本身就会返回完整、有效的图片直链，完全不需要额外添加文件扩展名。比如你收到的错误链接，原始有效地址应该是https://lh3.googleusercontent.com/p/AF1QipOcxB_SbhXOWZVkrw15sBppOigDEgl1fcvMtpqv=w100-h100-k，加上.png后变成了服务器无法识别的无效路径，自然返回404。

修正后的代码如下：

renderPhotos(place) { 
  if (!place.photos || place.photos.length === 0) return; 
  const cfg = {maxWidth: 100, maxHeight: 100} 
  return (
    <div className={styles.photoStrip}> 
      {place.photos.map((photo, index) => { 
        const photoUrl = photo.getUrl(cfg); // 移除多余的.png后缀
        return (
          <img 
            key={index} // 用索引或者photo.reference做key更稳定
            src={photoUrl} 
            alt="地点照片" 
          />
        ) 
      })} 
    </div>
  ) 
}

额外提个小建议：尽量别用URL作为React组件的key，如果后续调整图片尺寸参数，URL会变化，可能触发不必要的组件重渲染。用照片的索引或者photo.reference属性会更稳定。

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