Html 我可以在I或span标记中放置src属性吗？

在我的网站的页脚中，我有一堆字体很棒的图标，这些图标可以在不同的社交媒体网站上显示我的个人资料。我还在我的网页上创建了一个模式，当你点击一张图片时，它基本上会聚焦在上面。所以我的想法是用户可以点击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图标

---

数据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>

---

第一个示例是站点上的一个实例。您应该将

i

元素放入

a

标记中，或者使用

data src

属性。我需要做什么才能使data 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;
}