时间戳

首页 > 解决方案 > 图像未在本地显示

reactjs - 图像未在本地显示

问题描述

我需要使用 props 元素将背景图像设置为 DIV 元素，如果我导入图像，它会正确显示。

import image from '../../../assets/upload/sport/sport1.jpg';

const function = (props) = {
      <div style={{backgroundImage: `url(${image})` }}> </div>
}

但如果我使用这个：

const function = (props) = {
      <div style={{backgroundImage: `url(../../../assets/upload/${props.path})`}}> </div>
}

props.path 包含：sport/sport1.jpg

它不工作。你能帮我吗，为什么？谢谢

标签： reactjs

解决方案

当您通过 CSS 引用同一文件时，图像的路径不正确。您的开发环境位置http://localhost:3000因此具有位于更高目录中的图像是无效的。

当您使用import它时，Webpack 会处理文件并相应地设置路径。

如果要在 Webpack 之外引用静态图像，可以将图像放在public目录中，然后使用：

<div style={{backgroundImage: `url(/${props.path})`}}> </div>

推荐阅读