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

u7up0aaq  于 2022-12-23  发布在  Go
关注(0)|答案(4)|浏览(198)

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

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>
  )
}

我的代码在上面。

sirbozc5

sirbozc51#

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

tv6aics1

tv6aics12#

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

wz8daaqr

wz8daaqr3#

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

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

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

vuv7lop3

vuv7lop34#

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

$ lsof -i :3000

然后,您可以从活动监视器中终止该进程。在我的例子中,NodeJS的另一个示例正在使用端口3000。

相关问题