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

Question

我正在尝试使用页脚中的svg文件创建社交媒体图标。如果我使用内联css，它是有效的。如果我不这样做，它就不会显示。我正在使用样式组件包。

知道我如何在没有内联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>

Answer 1

如果你想在标签之间显示图像，那么我们有两个选项，第一个是我们的自定义图像(还需要为其样式编写一些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" alt="" 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>

Answer 2

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

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