如何在 <div> 标签内的 <a> 标签内显示图像？

Posted 2023-03-05

【中文标题】如何在 <div> 标签内的 <a> 标签内显示图像？

【英文标题】：How to show images inside <a> tags inside <div> tags?

【发布时间】：2021-11-22 18:34:10

【问题描述】：

我正在尝试在页脚中使用 svg 文件创建社交媒体图标。如果我使用内联 CSS，它可以工作。如果我不这样做，它不会显示。我正在使用 styled-components 包。

知道如何在没有内联 css 的情况下让它工作吗？

这行得通：

<div style= width: '25px', margin: '0 5px' >
  <a href=link>
    <img src=iconName alt=(iconName, 'icon') />
  </a>
</div>

这不起作用：

const iconSocial = styled.div`
  width: 25px;
  margin: 0 5px;
`;

<iconSocial>
  <a href=link>
    <img src=iconName alt=(iconName, 'icon') />
  </a>
</iconSocial>

这也不起作用：

<div>
  <a href=link>
    <img src=iconName alt=(iconName, 'icon') />
  </a>
</div>

【参考方案1】：

.svg-img
  width: 100px;
  height: 100px

<div>
  <a href="">
    <img class="svg-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNC44NTEgMTEuOTIzYy0uMTc5LS42NDEtLjUyMS0xLjI0Ni0xLjAyNS0xLjc0OS0xLjU2Mi0xLjU2Mi00LjA5NS0xLjU2My01LjY1NyAwbC00Ljk5OCA0Ljk5OGMtMS41NjIgMS41NjMtMS41NjMgNC4wOTUgMCA1LjY1NyAxLjU2MiAxLjU2MyA0LjA5NiAxLjU2MSA1LjY1NiAwbDMuODQyLTMuODQxLjMzMy4wMDljLjQwNCAwIC44MDItLjA0IDEuMTg5LS4xMTdsLTQuNjU3IDQuNjU2Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LTEuOTUyLTEuOTUxLTEuOTUyLTUuMTIgMC03LjA3MWw0Ljk5OC00Ljk5OGMuOTc1LS45NzYgMi4yNTYtMS40NjQgMy41MzYtMS40NjQgMS4yNzkgMCAyLjU2LjQ4OCAzLjUzNSAxLjQ2NC40OTMuNDkzLjg2MSAxLjA2MyAxLjEwNSAxLjY3MmwtLjc4Ny43ODR6bS01LjcwMy4xNDdjLjE3OC42NDMuNTIxIDEuMjUgMS4wMjYgMS43NTYgMS41NjIgMS41NjMgNC4wOTYgMS41NjEgNS42NTYgMGw0Ljk5OS00Ljk5OGMxLjU2My0xLjU2MiAxLjU2My00LjA5NSAwLTUuNjU3LTEuNTYyLTEuNTYyLTQuMDk1LTEuNTYzLTUuNjU3IDBsLTMuODQxIDMuODQxLS4zMzMtLjAwOWMtLjQwNCAwLS44MDIuMDQtMS4xODkuMTE3bDQuNjU2LTQuNjU2Yy45NzUtLjk3NiAyLjI1Ni0xLjQ2NCAzLjUzNi0xLjQ2NCAxLjI3OSAwIDIuNTYuNDg4IDMuNTM1IDEuNDY0IDEuOTUxIDEuOTUxIDEuOTUxIDUuMTE5IDAgNy4wNzFsLTQuOTk5IDQuOTk4Yy0uOTc1Ljk3Ni0yLjI1NSAxLjQ2NC0zLjUzNSAxLjQ2NC0xLjI4IDAtMi41Ni0uNDg4LTMuNTM1LTEuNDY0LS40OTQtLjQ5NS0uODYzLTEuMDY3LTEuMTA3LTEuNjc4bC43ODgtLjc4NXoiLz48L3N2Zz4=">
  </a>
</div>

【参考方案2】：

如果您想在标签之间显示图像，那么我们有两个选项，第一个是我们的自定义图像（您还需要为其样式编写一些 css），第二个是使用 fa 图标，您可以根据您的要求使用任何方法。

<a href="">
       <img src="https://static.vecteezy.com/system/resources/thumbnails/001/993/889/small/beautiful-latin-woman-avatar-character-icon-free-vector.jpg"  srcset=""> Profile
   </a>
   <hr>
   <a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook</a>
  <a href=""> <i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
   <a href=""> <i class="fa fa-linkedin" aria-hidden="true">Linkdin</i> </a>