在反应应用程序中定义图像路径时遇到问题

Question

我在 React 应用程序中定义图像路径时遇到问题，这让我很沮丧，所以我正在寻求专业人士的帮助。我在 public 和 src 之间来回移动我的图像文件夹。当 background:url(path) 起作用时， img src="path" 不起作用，反之亦然。我收到此错误“错误：无法解析 '/Applications/MAMP/htdocs/react-web/src' 中的 'images/img-2.jpg'”。如果我将图像文件夹移动到 src，它可以工作，但 background:url(path) 不会加载图像。我在https://github.com/miraj977/react-project/ 有这个项目。另一个问题是 github 页面；我已经在 gh-pages (https://miraj977.github.io/react-project/) 中设置了这个项目，但它只能加载到导航并停止。不加载身体。另外，我已经在 package.json “https://miraj977.github.io/react-project/”中设置了主页，但是每当我单击应该重定向到主页的徽标时，它都会重定向到“https://miraj977.github。 io/”。我已经分享了 github 项目的链接，供您查看代码。现在变得非常令人沮丧。请指导我解决这些问题的正确方法。非常感谢您的时间。提前谢谢你。

Answer 1

只有导航栏显示实际上与您的路由配置有关。

而不是这个：

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/services" exact component={Services} />
          <Route path="/products" exact component={Products} />
          <Route path="/sign-up" exact component={SignUp} />
        </Switch>
      </Router>
    </>
  );
}

这样做：

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/react-project" exact component={Home} />
          <Route path="/react-project/services" exact component={Services} />
          <Route path="/react-project/products" exact component={Products} />
          <Route path="/react-project/sign-up" exact component={SignUp} />
        </Switch>
      </Router>
    </>
  );
}

由于您的主页网址后缀为 /react-project，因此您希望在路由和重定向中考虑到这一点。

---

因此，为了更加清晰，Navbar 中的导航 Link 组件也应该从此更改：

<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
  1 TRVL 2 <i class="fab fa-typo3" />3{" "}
</Link>

到这里：

<Link to="/react-project" className="navbar-logo" onClick={closeMobileMenu}>
  1 TRVL 2 <i class="fab fa-typo3" />3{" "}
</Link>

---

至于图片问题。

要通过src 指定 img，您可以执行以下操作：

import img1 from "../images/img-1.jpg"; // relative path from directory this component file is in
// ...

<CardItem
  src={img1}
  text="Explore the hidden waterfall deep inside the Amazon Jungle"
  label="Adventure"
  path="/services"
/>

要通过 css 将图像指定为背景图像，您可以执行以下操作：

background: url("../images/img-home.jpg"); // Also relative to current file location

来自公共 url 的路径显然不再像以前在创建反应应用程序 4 中那样解析，请参阅 this github issue。