将 srcSet 添加到样式组件主题图像

Question

我的网站有多个主题。我正在尝试将 srcSet 添加到这样的图像中：

export const Header = styled.img.attrs({
  src: props => props.theme.images.Header1x,
  srcSet: `${props => props.theme.images.Header1x} 1x, ${props => props.theme.images.Header2x} 2x, ${props => props.theme.images.Header3x} 3x`,
})`
  height: 42px
`;

src属性正确，但srcSet不正确：

<img src="/images/header.jpg" srcset="function (props) {
    return props.theme.images.Header1x;
  } 1x, function (props) {
    return props.theme.images.Header2x;
  } 2x, function (props) {
    return props.theme.images.Header3x;
  } 3x" class="sc-VJcYb epAqoN">

styled-components 主题功能很棒，我想用它来组织我的所有主题，但我想不出一种方法来用它正确构建 srcSet。谁有什么策略，还是我需要完全朝另一个方向走？

Answer 1

您的 srcSet 属性的值是一个模板字符串，但应该是一个 returns 字符串的函数。

export const Header = styled.img.attrs({
  src: props => props.theme.images.Header1x,
  srcSet: props => `${props.theme.images.Header1x} 1x, ${props.theme.images.Header2x} 2x, ${props.theme.images.Header3x} 3x`,
})`
  height: 42px
`;

将 srcSet 添加到样式组件主题图像

Add srcSet to styled-component themed image

reactjs

styled-components