reactjs - 反应，使用样式组件显示图像

Question

我有一个关于动态分配图像的问题。

我试图按每种情况显示每个图像（取决于每个数据的类型和 totalCount）。

但是这段代码不起作用。

export default function Title() {
    let image =
  "../../../assets/images/situations/situation_" + totalCount + ".png";
    return (
        <>
        {types[totalCount - 1] === "situation" ? 
        <SituationTitleStyled img={image}>
        ...
        </SituationTitleStyled>
       }
       </>
    )
}

const SituationTitleStyled = styled.div`
    ...
    background: url(${(props) => props.image});
`;

否则，如果变量“image”是像“https://mdn.mozillademos.org/files/7693/catfront.png”这样的绝对路径，那么它可以工作。

我不知道我该怎么做，以及使用绝对路径和相对路径之间有什么区别。:0

标签： reactjsimage

Answer 1

路径应该由webpack生成：

您可以直接在 JavaScript 模块中导入文件。这告诉 webpack 将该文件包含在包中。与 CSS 导入不同，导入文件会为您提供一个字符串值。该值是您可以在代码中引用的最终路径，例如图像的 src 属性或 PDF 链接的 href。

所以在你的代码中你可以调用require：

let image = require("../../../assets/images/..." + totalCount + ".png");

请参阅几乎重复的问题。