某些图像在 React 中首次访问时无法加载，需要刷新才能正确加载

Question

我正在开发 React 应用程序，但遇到了导航到页面时某些图像无法加载的问题。具体来说，在 ProductDetails 页面上，首次访问页面时不会加载背景图像 (/asset/img/bg/breadcrumb_bg.jpg)。但是，一旦刷新页面，图像就会正确加载。

这是 ProductDetails 组件的简化代码：

 function ProductDetails() {
  return (
    <>
      {/* main-area */}
      <main>
        {/* breadcrumb-area */}
        <section
          className="breadcrumb-area breadcrumb-bg"
          data-background="/asset/img/bg/breadcrumb_bg.jpg"
        >
          <div className="container">
            <div className="row">
              <div className="col-12">
                <div className="breadcrumb-content text-center">
                  <h2>Shop Single</h2>
                  <nav aria-label="breadcrumb">
                    <ol className="breadcrumb">
                      <li className="breadcrumb-item">
                        <a href="index.html">Home</a>
                      </li>
                      <li
                        className="breadcrumb-item active"
                        aria-current="page"
                      >
                        Shop Details
                      </li>
                    </ol>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* breadcrumb-area-end */}

      </main>
      {/* main-area-end */}
    </>
  );
}

export default ProductDetails;

应用程序.js

import {Routes, Route} from 'react-router-dom'
import Header from './componetes/header';
import Footer from './componetes/footer';
import Home from './componetes/home';
import CategoryProducts from './componetes/categoryproducts';
import Category from './componetes/categories';
import AllProduct from './componetes/allProducts';
import ProductDetails from './componetes/productDetails';
import Checkout from './componetes/checkout';
import Cart from './componetes/cart';
import Register from './componetes/register';
import Login from './componetes/login';

function App() {
  return (
    <>

    <Header/>


  <Routes>
    <Route path="/" element={<Home /> } />
    <Route path="/category" element={<Category /> } />
    <Route path="/category/:slug/:id" element={<CategoryProducts /> } />
    <Route path="/allproducts" element={<AllProduct /> } />
    <Route path="/product/:slug/:id" element={<ProductDetails /> } />
    <Route path="/checkout" element={<Checkout /> } />
    <Route path="/cart" element={<Cart /> } />
    <Route path="/register" element={<Register /> } />
    <Route path="/login" element={<Login /> } />
  </Routes>

  <Footer/>

</>

    
  );
}

export default App;

问题：

• 当我第一次导航到“产品详细信息”页面时，背景图像（通过 data-background="/asset/img/bg/breadcrumb_bg.jpg" 设置）不会加载。
• 刷新页面后，图片正确加载。
• 我已验证该图像存在于 public/asset/img/bg 文件夹中。

我尝试过的：

1.确保图片路径正确且图片存在于public/asset/img/文件夹中。

2.尝试将查询参数（?v=1）附加到图像URL以避免缓存问题。

3.验证浏览器的网络选项卡中没有404错误。

问题： 为什么第一次访问我的 React 应用程序时图像无法加载？如何确保图像在导航时立即加载而无需刷新页面？这是 React Router 或背景图像处理的问题吗？

Answer 1

刷新时，浏览器会对页面发出完整请求并获取所有资源，包括图像。但是，在动态导航期间，浏览器不会重新加载图像，除非明确告知这样做。

我建议尝试直接使用React中的

backgroundImage

样式或者在CSS中定义背景。除非必要，否则请避免使用

data-background

，并且您可以实现一个脚本来动态处理它。