Styled Components传递图片Props时图片不显示问题排查

问题根源 #

你的代码里有两个关键错误导致图片不显示：

• props访问逻辑错误：你在styled-components的样式回调里把参数命名为NoBillsLaptopPNG，然后试图取它的.src，但实际上你传给组件的NoBillsLaptopPNG已经是图片的src字符串（你传的是NoBillsLaptopPNG.src），不是原始导入对象。
• src属性赋值错误：基于上面的错误，你相当于在访问一个字符串的.src属性，结果肯定是undefined，自然加载不出图片。

修正后的代码方案 #

方案一：保留props传参的方式（适合后续响应式切换）

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
      mobileSrc={NoBillsMobilePNG.src}
      laptopSrc={NoBillsLaptopPNG.src}
    />         
  </div>;
};

const TestImg = styled.img<{
  mobileSrc: string;
  laptopSrc: string;
}>`
  // 直接使用传入的laptop端图片地址
  src: url(${props => props.laptopSrc});

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

  // 后续添加响应式切换逻辑示例
  @media (max-width: 768px) {
    src: url(${props => props.mobileSrc});
  }
`;

方案二：更常规的img标签用法（代码更简洁）

如果不需要通过props动态控制，直接给img标签传src属性，用styled-components处理样式即可：

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 src={NoBillsLaptopPNG.src} alt="无账单摘要" />         
  </div>;
};

const TestImg = styled.img`
  width : 126.07px;
  height : 107.59px;
  margin-top: 2px;

  // 响应式切换图片的写法
  @media (max-width: 768px) {
    content: url(${NoBillsMobilePNG.src});
  }
`;

内容的提问来源于stack exchange，提问作者constantlyFlagged