next.js 我收到错误“请求的资源不是/public/logoicon/logoOrange.png的有效图像,字符集= utf-8 "

u7up0aaq 于 2022-12-23 发布在 Go

关注(0)|答案(4)|浏览(199)

尝试将PNG或SVG文件添加到代码中时出错。我的错误是什么？我需要做哪些更改才能使其正常工作？

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>

      <Head>
        <title>Maintenance</title>
        <meta name="description" content="This Website is in Maintenance Mode" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.main}>
     <h1 className={styles.h1}>This website is currently in</h1>
     <break></break>
     <h1 className={styles.h2}>Maintenance Mode.</h1>
     <Image
            src="/public/logoicon/logoOrange.png"
            alt="server and database with broken cable"
            width={77}
            height={33}
        />
     <p className={styles.p}>©2022 Karlo-Hosting.com</p>
     </div>
    </div>
  )
}

我的代码在上面。

next.js

来源：https://stackoverflow.com/questions/71617582/i-am-getting-the-error-the-requested-resource-isnt-a-valid-image-for-public-l

4条答案

按热度按时间

sirbozc51#

解决方案1.这个错误是在终端的权利，所以'公共'文件夹是暴露在根级别，所以你不需要指定的公共文件夹
请尝试以下操作-源代码="/徽标图标/徽标橙色. png”
而不是- src="/公共/徽标图标/徽标橙色. png”
解决方案2.still如果你得到400坏请求错误在控制台
则这是一般客户端错误
检查-〉a）URL字符串语法B）损坏的缓存和cookie c）检查图像是否太大d）检查命名文件夹中是否有任何空格

赞(0）回复(0）举报 2022-12-23

tv6aics12#

如果服务器向您发送一个响应，上面写着“received text/html; charset=utf-8”，尝试分析错误。您可以看到服务器显示 “这是您请求的UTF-8格式的文本/HTML内容”。
检查图片的来源是否正确。如果图片存在，试着检查文件服务器发送回给你的是什么文本/HTML内容。

赞(0）回复(0）举报 2022-12-23

wz8daaqr3#

也是刚刚开始拿起Next.js，并对为什么我的图像没有显示感到困惑。在多次更改格式并检查源代码后。看起来图像实际上托管在公共文件夹中

我的图像问题的解决方案：

因此，在以下目录中添加图像：
第一个月
这就是我的问题所在希望这对其他人有帮助。

赞(0）回复(0）举报 2022-12-23

vuv7lop34#

对我来说，另一个进程正在port 3000上运行。您可以通过在Mac终端中运行下面的命令找到该进程。