JavaScript图片轮播器：如何将本地图片源改为网络链接源

嘿，恭喜你完成了图片轮播器的练习！要把本地图片换成网络图片其实没什么门槛，核心就是替换图片的src属性值。不过针对谷歌相册的图片，得注意它默认的分享链接不能直接用，得做个小转换，下面一步步来帮你搞定：

一、普通网络图片的替换方法 #

如果是普通的公开网络图片（比如你自己服务器上的图，或者其他公开图床的链接），直接把原来的本地路径换成完整的图片URL就行：

原来的本地图片代码： #

<img src="image1.jpg" alt="轮播图1">
<img src="image2.jpg" alt="轮播图2">

修改后加载网络图片的代码： #

<img src="https://example.com/your-public-image-1.jpg" alt="轮播图1">
<img src="https://example.com/your-public-image-2.jpg" alt="轮播图2">

二、谷歌相册图片的特殊处理 #

谷歌相册默认的分享链接是跳转链接（比如https://photos.app.goo.gl/xxxxxx），不能直接作为img的src使用，得转换成直接可嵌入的图片URL，有两种简单方法：

方法1：右键复制直接地址 #

1. 打开谷歌相册里的目标图片，点击右上角的「分享」→「创建链接」，复制生成的链接；
2. 在浏览器中打开这个链接，进入图片的预览页面；
3. 右键点击图片，选择「复制图片地址」（不同浏览器表述可能略有不同，比如「复制图像链接」）；
4. 把复制到的地址粘贴到img的src属性里就行。

方法2：手动转换链接（进阶） #

如果你不想跳转页面，也可以解析谷歌相册的跳转链接：

• 跳转链接格式：https://photos.app.goo.gl/ABC123
• 直接图片URL格式：https://lh3.googleusercontent.com/ABC123=w[宽度]-h[高度]
  • 其中ABC123是跳转链接里的唯一ID，w和h可以自定义图片尺寸（比如w800-h600），不想指定的话可以去掉这部分，用原始尺寸。

修改后的谷歌相册图片代码示例： #

<img src="https://lh3.googleusercontent.com/your-photo-id=w1200-h800" alt="谷歌相册轮播图">

三、注意事项 #

• 确保你使用的网络图片是公开可访问的，如果是私人相册的图片，即使生成了链接，别人也看不到，自己访问可能需要登录谷歌账号；
• 可以给img标签加上loading="lazy"属性，让图片按需加载，优化轮播器的性能；
• 如果轮播器有JS逻辑切换图片，只需要修改图片数组里的URL就行，不需要改动JS的核心逻辑。

内容的提问来源于stack exchange，提问作者Michał Dziadkowiec