图片未显示 JavaScript [重复]答案

【问题标题】：Image not showing up JavaScript [duplicate]图片未显示 JavaScript [重复]
【发布时间】：2021-10-22 06:49:23
【问题描述】：

我正在用 JavaScript 创建一个电子商务网站，我不知道为什么我的图片没有显示在我的本地主机中。

我所有的图像都位于一个图像文件中，该文件又位于我的 src 中。

我似乎无法弄清楚我做错了什么，也似乎找不到类似的问题。

import React from "react";
import "./App.css";
import Header from "./Header";

function App() {
  return (
    //BEM
    <div className="app">
      <h1>test</h1>
      <Header />
      {/*Home*/}
    </div>
  );
}

export default App;

import React from "react";
import "./Header.css";

function Header() {
  return (
    <div className="header">
      <img className="header__logo" src="images/nat6.jpg" alt="logo" />
      <div className="header__search">
        <input className="header__searchInput" type="text" />
        {/*Logo*/}
      </div>
      <div className="header__nav">
        <div className="header__option">
          <span className="header__optionLineOne">Hello Guest</span>
          <span className="header__optionLineOne">Sign In</span>
        </div>
        <div className="header__option">
          <span className="header__optionLineOne">Returns</span>
          <span className="header__optionLineOne">Orders</span>
        </div>
        <div className="header__option">
          <span className="header__optionLineOne">Premium</span>
          <span className="header__optionLineOne">Services</span>
        </div>
      </div>
    </div>
  );
}

export default Header;

【问题讨论】：

查看开发者工具中的网络标签，有没有报错？
您的服务器是否正在为images 目录提供服务？您可以通过打开 localhost/images/nat6.jpg 来查看它。（用你正在使用的服务器替换 localhost）
从“图片路径”导入 imgUrl；

标签： javascript reactjs image

【解决方案1】：

假设您使用Create React App 来设置您的开发环境，您应该将图像放在public 文件夹中。其他所有内容不被视为服务器资源，而是 React 路由，因此它返回 index.html 而不是图像。

【讨论】：

这与提议的副本中的this answer 相同...

【解决方案2】：

在使用 React.js 时需要这样做：从 "./your-image-path.png" 和这个 img src={image} alt="Image" /> 导入图像

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from "react";
import image from "./your-image-path.png"

function App() {
  return (
    <div className="app">
    <img src={image} alt="Image" />
  );
}

export default App;

【讨论】：

【解决方案3】：

尝试导入您的 img：

从“...”导入 img

并添加到您的 src:

&lt;img className="header__logo" src={img} alt="logo" /&gt;

【讨论】：