sites.google.com编写HTML时Google Drive图片无法显示

你的Google Drive图片无法正常显示，核心是三类代码问题：

• 图片src属性里直接写了JS模板字符串语法${}，静态HTML不会解析这类语法，浏览器会把整串带${}的文本当成无效URL请求，自然拿不到图片
• 你注释掉的分享链接是Google Drive的网页预览地址，不是可直接嵌入的图片资源地址，浏览器无法将这类网页地址作为图片资源加载
• 原有代码存在p标签错误嵌套、未闭合的问题，会加剧布局异常

• 替换为Google Drive图片的正确直链格式：可直接在外部网页嵌入的Drive图片地址格式为https://drive.google.com/uc?export=view&id=【你的图片ID】，你的图片ID为1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9，对应直链为https://drive.google.com/uc?export=view&id=1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9
• 修正HTML标签错误，优化浮动环绕的布局样式，避免文字和图片贴边、浮动溢出问题
• 修正后可直接使用的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=default'></script>
<style>
/* 清除浮动避免布局错乱 */
.content::after {
  content: "";
  display: block;
  clear: both;
}
/* 右侧浮动图片样式，留够边距避免文字贴边 */
.right-float-img {
  float: right;
  width: 200px;
  margin: 0 0 12px 16px;
  border: 1px solid #eee;
}
p {
  font-size: 18px;
  color: #000;
  text-align: justify;
}
</style>
</head>
<body>
<h1>Coulomb's Law</h1>  
<div class="content">
  <img class="right-float-img" src="https://drive.google.com/uc?export=view&id=1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9" alt="库仑定律示意图">

  <p>Coulomb's law states that the electrical force between two charged objects is directly proportional to the product of the quantity of charge on the objects and inversely proportional to the square of the separation distance between the two objects.</p>

  <p>In equation form, Coulomb's law can be stated as</p>
  $$ {F = \frac{k* Q_1 * Q_2}{r^2} }$$

  <p>where Q<sub>1</sub> represents the quantity of charge on object 1 (in Coulombs), Q<sub>2</sub> represents the quantity of charge on object 2 (in Coulombs), and r represents the distance of separation between the two objects (in meters). The symbol k is a proportionality constant known as the Coulomb's law constant.</p>
</div>
</body>
</html>

• 保持图片共享权限为「任何获得链接的用户可查看」即可正常加载，无需额外调整权限
• 静态HTML中不要直接在标签属性值内写${变量}这类JS模板语法，这类语法必须在JS脚本中运行解析后才能生效，直接写在HTML中会被识别为普通文本，导致属性值无效
• 加载失败的错误效果参考：
  

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