导入的带有 <img> 标签的 SVG 包装在 <a> 标签中时会消失吗？答案

【问题标题】：Imported SVG with <img> tags disappearing when wrapped in <a> tags?导入的带有 <img> 标签的 SVG 包装在 <a> 标签中时会消失吗？
【发布时间】：2018-08-01 20:20:01
【问题描述】：

我正在使用 React 将多个 SVG 图像导入到一个组件中。然后我在<img> 标签内渲染图像，它按预期工作。

import React from 'react';

// Icons
import linkedin from './icons/linkedin.svg';
import stackoverflow from './icons/stackoverflow.svg';

const icons = [
  {
    data: linkedin,
    string: 'Linkedin',
    url: 'https://google.com/'
  },
  {
    data: stackoverflow,
    string: 'Stack Overflow',
    url: 'https://google.com'
  },
];

const mapIcons = icons.map((icon, index) => (
  <img key={index} src={icon.data} alt={icon.string} />
));

const IconContainer = () => (
 <div>
  {mapIcons}
 </div>
);

export default IconContainer;

但是，当我用<a> 标签包装<img> 标签时，SVG 就消失了。如果我使用<object> 标签，也会发生同样的事情。

const mapIcons = icons.map((icon, index) => (
  <a href={icon.url} target="_blank">
    <img key={index} src={icon.data} alt={icon.string} />
  </a>
));

内联 SVG 不存在这个问题，但我更喜欢 <img> 标签，因为我不想用一堆 SVG 填充我的组件。有没有人遇到过这种情况或知道解决方案？

【问题讨论】：

看看这个，我看你的代码没有问题。 stackblitz.com/edit/react-vgysui 。或者多解释一下来解决这个问题
这是我的项目：Link to Project。一定是我的风格有问题
是的，这是一个风格问题。检查上面的链接，刚刚用你的代码更新了你的样式，
感谢您为我调查此问题，似乎问题是 flex: 1 0 0 需要应用于 <a> 标记。请留下答案，我会将其标记为已回答。谢谢！
很高兴！！！成功了

标签： html reactjs svg

【解决方案1】：

通过我们的旧对话，刚刚使用 flex 更新了您的样式，请查看以下链接。

谢谢

demo

【讨论】：