链接一个 img id="logo"答案

【问题标题】：Link a img id="logo"链接一个 img id="logo"
【发布时间】：2020-11-07 12:11:40
【问题描述】：

我有 - img id="logo" 所以我可以在我的网站上显示我的徽标，它的完整代码是：

<img id="logo" src="nsc/logo2.png" alt="logo" />

如何使用<a href=""> 链接此徽标图片???

我尝试了许多不同的方法，但它们都不起作用：/

【问题讨论】：

欢迎来到 StackOverflow！恭喜您通过代码示例提出结构良好的问题，继续努力！

标签： html css

【解决方案1】：

<a href="www.example.com"><img id="logo" src="nsc/logo2.png" alt="logo" /></a>

【讨论】：

【解决方案2】：

嵌入一个链接标签会很好。 :)

<a href="your.html">
    <img id="logo" src="nsc/logo2.png" alt="BrandLog" />
</a>

它很干净，不需要 javascript :)

【讨论】：

【解决方案3】：

超级简单，只需将<img>标签用锚标签<a>包裹起来：

<a href="myUrl.html">
    <img id="logo" src="nsc/logo2.png" alt="logo" />
</a>

这会将整个图像变成你的链接:)

【讨论】：

【解决方案4】：

对于希望在a 标签而不是img 标签上接收点击事件的人

<a href="/chat" style="background: red; display: inline-block;">
  <img src="chat.svg" style="pointer-events: none; display: block;" width=40 height=40>
</a>

在a 标签上

display: inline-block in a：允许在 a 标签上设置宽度和高度

在img 标签上

display: block：帮助删除图片下方的多余空间
pointer-events: none：忽略点击img，点击事件将在a标签上触发

【讨论】：

【解决方案5】：

如果您无法将图片包装在链接中，则图片映射应该也能正常工作，无需 JavaScript 并且无需包装元素。

【讨论】：

【解决方案6】：

我像这样在 img 标签中添加 id：

  <img id={logo.id} src={logo.url} onError={this.handleImageError} />

由于我正在研究 React，这就是我在 id 和 src 属性中使用 JSX 的原因。如果图像损坏，则使用 onError 属性。它给了我一个事件，所以这就是我访问 id 属性的方式：

handleImageError = (e) => { console.log(e.target.id) }

【讨论】：

【解决方案7】：

这里有适合你的解决方案，

<img id="logo" src="nsc/logo2.png" alt="logo" onClick="window.open('http://yahoo.com');" />

【讨论】：

咩。这里没有理由使用 javascript
这是“错误”的原因：用户不能 a) 右键单击以复制链接，b) 将鼠标悬停在单击之前查看链接的位置，c) 中键单击（或右键单击并）在新选项卡中打开。