javascript - TypeScript/Styled 组件将图像作为 props 传递

Question

我下面有以下代码，旨在显示 屏幕上显示“NoBillsLaptopPNG.src”，但没有渲染任何图像。

图像导入正常，但不确定为什么图像没有显示。

import NoBillsMobilePNG from "../../public/assets/quotes/no-bills-mobile.png"
import NoBillsLaptopPNG from "../../public/assets/quotes/no-bills-laptop.png"

export const NoBillsSummary = () => {
  return <div>
    <TestImg
      NoBillsMobilePNG={NoBillsMobilePNG.src}
      NoBillsLaptopPNG={NoBillsLaptopPNG.src}
    ></TestImg>         
  </div>;
};

const TestImg = styled.img<{
  NoBillsMobilePNG: string;
  NoBillsLaptopPNG: string;
}>`
   // the reason the img is being passed in as props as media query will later be added to switch between images

   src: url(${(NoBillsLaptopPNG) => NoBillsLaptopPNG.src});

   width : 126.07px;
   height : 107.59px;
   margin-top: 2px;
`;

Answer 1

当您使用 TestImg 组件时，您将 src 作为 props 传递给 NoBillsLaptopPNG。

最好将 props 命名为 NoBillsLaptopPngSrc。

当您设置 TestImg 样式时，NoBillsLaptopPNG 输入参数已经是 src。因此，再次引用其 src 字段是没有意义的。

试试这个

 src: url(${(NoBillsLaptopPNG) => NoBillsLaptopPNG});