Question

I am using React to import several SVG images into a component. I am then rendering the images inside <img> tags which works as expected.

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;

However, when I wrap the <img> tags with <a> tags, the SVG's just disappear. Same thing happens if I use <object> tags.

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

This problem doesn't exist with inline SVG but I prefer <img> tags as I don't want to fill my component with a bunch of SVG. Has anyone ever encountered this before or know of a solution?

Answer 1

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

由于

demo

包裹在<a> tags?

1 个答案: