Next.js导入图片显示损坏，直接写路径却正常问题求助

核心问题排查与修复 #

• 缺失图片文件后缀：你的代码中hamburgerBtn导入未指定文件后缀（比如.svg），Next.js无法正确解析资源路径，导致图片加载失败。
• 导入与使用逻辑修正：原生img标签使用导入的图片变量时，变量本身就是图片的处理后URL，需确保导入路径（含后缀）与实际文件完全匹配。

修正后的代码示例 #

"use client";
import React, { useState } from 'react';
import Logo from '../assets/Logo.svg';
// 补充.svg后缀，同时导入关闭按钮图片用于切换
import hamburgerBtn from '../assets/hamburgerBtn.svg';
import closeBtn from '../assets/closeBtn.svg';
import '../app/globals.css';

function Navbar() {
    const [toggle, setToggle] = useState(false);
    const handleClick = () => setToggle(!toggle);

    return (
        <div className='w-full h-[80px] bg-white'>
            <div className="2xl:max-w-[1400px] 2xl:px-[0] xl:max-w-[1180px] lg:max-w-[924px] md:max-w-[668px] sm:max-w-[540px] max-w-[460px] md:px-[0px] sm:px-[40px] px-[40px] m-auto w-full h-full flex justify-between items-center">
                <img src={Logo} className='sm:h-[40px] h-[30px]' alt="Logo" />
                <div className="hidden md:flex items-center">
                    <ul className='flex gap-6'>
                        <li>Home</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </div>
                <div className='md:hidden' onClick={handleClick}>
                    {/* 根据toggle状态切换汉堡/关闭按钮 */}
                    <img 
                        className="sm:h-[25px] h-[20px]" 
                        src={toggle ? closeBtn : hamburgerBtn} 
                        alt={toggle ? "Close menu" : "Open menu"} 
                    />
                </div>
            </div>
        </div>
    )
}
export default Navbar;

额外注意事项 #

• 文件路径与大小写：确保导入路径中的文件夹、文件名大小写与实际文件系统完全一致（部分部署环境区分大小写）。
• 推荐使用Next.js Image组件：App Router下优先使用next/image组件，它会自动优化图片加载，避免路径解析问题，示例：

  import Image from 'next/image';
  // 使用方式
  <Image src={Logo} alt="Logo" width={40} height={30} className='sm:h-[40px] h-[30px]' />
  

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