html - 我可以将 src 属性放在 i 或 span 标记中吗？

Question

在我的网站页脚中，我有一堆很棒的字体图标，这些图标可以引导我在不同社交媒体网站上的个人资料。我还在我的网页上创建了一个模式，当您单击图像时，它基本上会聚焦在该图像上。所以我的想法是用户可以单击 Snapchat 图标，然后我的 Snapcode 就会弹出，以便用户可以获取它。与普通社交媒体不同，Snapchat 不使用 URL 链接来查找用户个人资料。下面是我编写的代码行，我还将留下一个指向我的网站的链接，以便您可以看到我遇到的问题。

<i class="fa fa-snapchat w3-hover-text-yellow" src="apps/images/snapchat.png" onclick="onClick(this);" class="w3-hover-opacity"></i>

我的问题是，是否可以做这样的事情？我可以让我的函数正常工作，但我只是不知道如何隐藏图像，以便它仅在用户单击链接时可见。

我也尝试过类似的方法，但还是没有效果。 toggleFunction() 只是将类名从 w3-hide 更改为 w3-show，并且可以与其他元素一起正常工作。

<i class="fa fa-snapchat w3-hover-text-yellow">
<img src="apps/images/snapchat.png" class="w3-hide" style="width:100%" onclick="toggleFunction();onClick(this);" class="w3-hover-opacity" alt="">
</i>

如果有人能帮助我，我将不胜感激。每当您单击 Snapchat 图标时，该问题都会出现未定义的错误。

这是该页面的链接。它位于页脚中。 Snapchat 图标。

Nerdislander.com

Answer 1

Data-src 属性就是答案。非常感谢@Yulio 指出了这一点。

我稍微修改了代码并修改了现有的函数。

<i class="fa fa-snapchat w3-hover-text-yellow" data-src="apps/images/snapchat.png" onclick="onClick2(this);" class="w3-hover-opacity" data-alt="Take a snap of my snapcode to add me on Snapchat!"></i>

接下来，我更改了 onClick 函数来查找 dataset.*，而不是使用如下所示的 src

function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}

function onClick2(element) {
document.getElementById("img01").src = element.dataset.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.dataset.alt;
}