Question

我有本地图像，我尝试设置背景图像，但是它对我不起作用，如果托管了图像，一切都可以正常工作，我在做什么错了？

const content = [
  {   
    image: "../../../../assets/images/otdih.jpg",
  },
  {
    image: "../../../../assets/images/otdih.jpg",
  },
  {
    image: "../../../../assets/images/otdih.jpg",

  },
]

  {content.map((item, index) => (
      <div
        key={index}
        className="slider-content"
        style={{
          background: `url('${item.image}') no-repeat center center`,
        }}
       />
    ))}

src/
   /assets/
      /images/
        /otdih.jpg
   /views/
     /homepage/
       /components/
         /uslugi/
           /uslugi.js

路径正确，我通过<Image src={require("...")}

检查了路径

Answer 1

根据assets结构，public文件夹将位于create-react-app文件夹中。在这种情况下，只需使用assets/images/otdih.jpg

此外，这里不需要单引号：url(${item.image}) no-repeat center center

Answer 2

我距离专家还很远，但是当您说“它不起作用”时，您的意思是即使您确定文件位于该位置也不会显示该图像。在文件系统中？如果是这样，则在部署应用程序的过程中，像webpack这样的捆绑工具可能会移动或重命名图像文件，甚至将其转换为数据URL。我自己也遇到了同样的问题。

您可以通过在应用运行时直接在浏览器中输入您认为图像的URL并查看图像是否加载来进行检查。

另一种检查方法是找到有效的背景图片，然后使用浏览器开发工具查看其URL。如果实际文件名'assets / images / otdih.jpg'已由捆绑工具（'c16b44cec15f4cecb410.jpg'）生成的一些奇怪的哈希值代替，则您需要一种在JS源中引用图像的方法，该方法对于捆绑工具所做的更改。当我今天早些时候遇到这个问题时，您可能会对the question I asked, and found the answer to感兴趣。

用本地图像添加backgroundImage不起作用

2 个答案: