ReactJs应用两大问题求助：图片路径读取失败与canvas属性无法移除

Hey Gabriel, let's break down and fix your two React problems step by step:

1. Fixing Image Path Not Loading in Login.jsx #

When working with static assets like images in React (especially if you're using Create React App), relative paths like ../assets/images/SiteLogo.png often don't work as expected because React's bundler (Webpack) alters file paths during the build process. Here are two reliable fixes:

Option 1: Import the Image Directly #

Import the image file at the top of your Login.jsx component, then use the imported variable as the src value. This ensures Webpack correctly resolves the path during bundling:

import React from 'react';
import { Image } from 'react-bootstrap'; // Assuming you're using react-bootstrap's Image component
import SiteLogo from '../assets/images/SiteLogo.png'; // Adjust the path to match your project structure

const Login = () => {
  return (
    <div>
      <Image src={SiteLogo} fluid />
    </div>
  );
};

export default Login;

Option 2: Use the public Folder for Static Assets #

If you move your assets/images folder into the top-level public directory (standard in Create React App), you can reference the image with an absolute path:

<Image src="/assets/images/SiteLogo.png" fluid />

Files in public aren't processed by Webpack, so their paths stay consistent after build.

2. Removing Canvas Width/Height Attributes in react-particle-js #

Direct DOM manipulation might fail because react-particle-js dynamically resets these attributes after your code runs. Try these more reliable approaches:

Option 1: Run DOM Manipulation After Component Mount #

Wrap your canvas modification code in a useEffect hook to ensure it runs only after the component (and particle canvas) has fully mounted:

import React, { useEffect } from 'react';
import Particles from 'react-particles-js';

const Login = () => {
  useEffect(() => {
    const canvas = document.querySelector("canvas");
    if (canvas) {
      // Remove inline style attributes
      canvas.style.removeProperty("width");
      canvas.style.removeProperty("height");
      // Remove HTML attributes
      canvas.removeAttribute("width");
      canvas.removeAttribute("height");
      // Optional: Set your desired dimensions instead
      canvas.style.width = "100%";
      canvas.style.height = "100vh";
    }
  }, []); // Empty dependency array ensures this runs once after mount

  return (
    <div>
      <Particles params={/* your particle config */} />
      {/* Rest of your Login component */}
    </div>
  );
};

export default Login;

Option 2: Override via Component Props #

Instead of removing attributes, override them using the library's built-in props. Pass a style prop to the Particles component to force your desired dimensions, which takes precedence over the library's defaults:

<Particles 
  params={/* your particle config */}
  style={{ width: '100%', height: '100vh' }}
/>

For more control, you can also adjust the particle config's responsive settings to handle scaling across different screen sizes—this is a more React-friendly approach than direct DOM tweaks.

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