如何在HTML页面中插入Goodreads平台logo？

方案1：内联SVG实现（无外部依赖，优先推荐） #

直接将以下SVG代码复制到你需要展示logo的HTML位置即可，无需引入额外资源，也不会出现图片加载失败的问题，可自由调整尺寸、配色：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 调整rect的fill属性可改logo背景色，默认是Goodreads官方品牌色 -->
  <rect width="24" height="24" rx="4" fill="#382110"/>
  <!-- 调整path的fill属性可改图标主体颜色 -->
  <path d="M8.5 6C7.67157 6 7 6.67157 7 7.5V16.5C7 17.3284 7.67157 18 8.5 18H9.5C10.3284 18 11 17.3284 11 16.5V7.5C11 6.67157 10.3284 6 9.5 6H8.5ZM13.5 6C12.6716 6 12 6.67157 12 7.5V16.5C12 17.3284 12.6716 18 13.5 18H14.5C15.3284 18 16 17.3284 16 16.5V7.5C16 6.67157 15.3284 6 14.5 6H13.5ZM17.5 8C17.2239 8 17 8.22386 17 8.5V15.5C17 15.7761 17.2239 16 17.5 16H18.5C18.7761 16 19 15.7761 19 15.5V8.5C19 8.22386 18.7761 8 18.5 8H17.5Z" fill="white"/>
</svg>

你可以修改SVG标签的width、height属性调整logo大小，修改对应fill属性自定义配色，适配你页面的整体风格。

方案2：本地图片引入方案 #

你之前复制图片无法使用，大概率是引用了跨域的第三方外链，或者路径填写错误，按以下步骤操作即可正常使用：

• 将Goodreads logo图片保存到你的项目静态资源目录，比如存放在./static/images/路径下，命名为goodreads-icon.png
• 使用img标签引入，注意填写正确的相对路径：

<img src="./static/images/goodreads-icon.png" alt="Goodreads logo" width="24" height="24">

如果需要给logo加跳转功能，可在外层嵌套a标签，自行填入对应的跳转地址即可。

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