reactjs React中未显示图像

krcsximq  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(115)

我是React JS的新手。我正在构建一个登录页面,我的CSS工作正常,显示背景图像。然而,随着我添加更多功能,图像停止显示,但没有错误。
下面是我在Login.css中的图像代码

body {
  background-image: url("E:\React js\chatbot\public\images\image.png");
  background-repeat: no-repeat;
  background-size: cover;
}

字符串

ee7vknir

ee7vknir1#

看起来你在CSS中使用了一个本地文件路径作为背景图片。当你使用React和React-react-app时,理解路径是如何工作的是很重要的。
您指定的路径似乎是本地计算机上的绝对路径,当部署项目或与其他人共享代码时,这可能无法按预期工作。
你可以这样做:

相对路径:

将你的图片文件放在你的React项目的public目录下。更改你的CSS以使用public目录的相对路径:

body {
  background-image: url("/images/image.png");
  background-repeat: no-repeat;
  background-size: cover;
}

字符串

导入React组件中的镜像:

或者,您可以直接将图像导入到React组件中,并在CSS中使用它:

// In your React component file (e.g., Login.js)
import React from 'react';
import backgroundImage from '../images/image.png'; // Adjust the path accordingly
function Login() {
  return (
    <div className="login-container">
      {/* Your login page JSX */}
    </div>
  );
}

// In your CSS file (e.g., Login.css)
.login-container {
  background-image: url("../images/image.png"); // Adjust the path accordingly
  background-repeat: no-repeat;
  background-size: cover;
}


确保根据项目结构调整路径。
选择适合您的项目结构和偏好的方法。

相关问题