JavaScript开发电商网站时localhost环境图片不显示如何解决

问题原因 #

你当前直接在img标签的src属性填写相对路径images/nat6.jpg，使用React脚手架（比如Create React App）开发时，这种写法默认会去public公共资源目录下找对应文件，你把图片放在src/images目录下自然无法被识别加载。

解决方案 #

有两种常用方案可选，根据你的使用场景挑选即可：

• 方案1：适配public目录规则
  在项目根目录的public文件夹下新建images文件夹，将所有静态图片转移到该目录下，原有src="images/nat6.jpg"的写法不需要改动，重启服务即可正常加载。该方案适合体积较大的图片、或者需要动态拼接路径的资源。
• 方案2：组件内导入后使用
  直接在Header组件中先导入图片资源，再绑定到src属性，适合logo这类静态小资源，示例代码如下：

  import React from "react";
  import "./Header.css";
  // 按实际相对路径导入图片，注意路径是Header.js和images文件夹的相对位置
  import logoImg from './images/nat6.jpg'
  
  function Header() {
    return (
      <div className="header">
        {/* 把src替换为导入的变量 */}
        <img className="header__logo" src={logoImg} 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;
  

快速排查技巧 #

打开浏览器F12控制台的「Network」标签，刷新页面后筛选「Img」类请求，看图片的实际请求路径返回的是不是404，就能快速确认路径是否匹配。

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