在next-js应用程序中执行“纱线生成”时出错
在next-js应用程序中执行“纱线生成”时出错
提问于 2022-07-05 14:21:31
我正在尝试构建这个应用程序来部署它，而且我收到了这个错误--自从我面临这个问题以来，我已经有一天了，我真的被困住了，没有想法，应用程序在本地运行良好，并且在开发模式中没有错误，当我执行yarn build时，这些错误就会出现。
控制台中的错误是：
C:\Users\MA13\Desktop\5 days Plan\Portofolio\portfolio-frontend>yarn build
yarn run v1.22.19
warning ..\..\..\..\package.json: No license field
$ next build
info - Linting and checking validity of types
info - Creating an optimized production build
Failed to compile.
./public/assets/contact.jpg
TypeError: fetch failed
at Object.processResponse (node:internal/deps/undici/undici:5555:34)
at node:internal/deps/undici/undici:5877:42
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
Import trace for requested module:
./components/Contact.jsx
./pages/index.js
./public/assets/projects/property.jpg
TypeError: fetch failed
at Object.processResponse (node:internal/deps/undici/undici:5555:34)
at node:internal/deps/undici/undici:5877:42
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Import trace for requested module:
./components/Projects.jsx
./pages/index.js
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.错误中提到的组件
索引：
import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/Navbar'
import HomeSection from '../components/HomeSection'
import About from '../components/About'
import Skills from '../components/Skills'
import Projects from '../components/Projects'
import Contact from '../components/Contact'
export default function Home() {
return (
<div >
<Head>
<title>Mahmoud | Full Stack</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/assets/logo.png" />
</Head>
<Navbar></Navbar>
<HomeSection/>
<About />
<Skills />
<Projects />
<Contact />
</div>
)
}项目构成部分：
import Image from 'next/image'
import Link from 'next/Link'
import PropertyImg from '../public/assets/projects/property.jpg'
const Projects = () => {
return (
<div id='projects' className='w-full'>
<div className='max-w-[1240px] mx-auto px-2 py-24 '>
<h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Projects</h3>
<h1>What I have Built</h1>
<div className='grid md:grid-cols-2 gap-8 my-4'>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Projects联络部分：
import Image from 'next/image'
import Link from 'next/Link';
import ContactImage from '../public/assets/contact.jpg'
import { AiOutlineMail } from 'react-icons/ai'
import { FaFacebook, FaGithub, FaLinkedinIn } from 'react-icons/fa'
import { BsFillPersonLinesFill } from 'react-icons/bs'
import { HiOutlineChevronDoubleUp } from 'react-icons/hi'
const Contact = () => {
return (
<div>
<div id='contact' className='w-full max-w-[1240px] mx-auto px-2 md:h-screen py-24 my-4'>
<h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Contact</h3>
<h1 className='mt-2 mb-6'>Get In Touch</h1>
<div className='md:grid md:grid-cols-6 gap-4 h-5/6 w-full flex flex-col my-4 justify-center '>
<div className=' col-span-2 py-4 px-4 shadow-xl rounded-xl shadow-gray-400 flex flex-col justify-between h-full'>
<div className='mt-2'>
<Image className='hover:scale-105 ease-in duration-300 rounded-xl' src={ContactImage} alt='/' />
<h3>Mahmoud Ashraf</h3>
<p className='my-3'>Full Stack Web Developer</p>
<p>I am available for freelancer or full-time positions. contact me and lets talk.</p>
</div>
<div>
<p className='text-center'>contact me on</p>
<div className="flex justify-center items-center py-4 space-x-4">
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<FaLinkedinIn />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<FaGithub />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<AiOutlineMail />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<FaFacebook />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<BsFillPersonLinesFill />
</div>
</div>
</div>
</div>
<div className='col-span-4 py-4 pt-10 md:px-12 shadow-xl rounded-xl shadow-gray-400 flex justify-between flex-col'>
<div className='flex-col space-y-3'>
<div className='md:flex justify-between md:space-x-3'>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="name">Name</label>
<input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='name' />
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="name">Phone</label>
<input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='phone' />
</div>
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="email">Email</label>
<input type="email" className='h-10 rounded-lg border-2 border-gray-200' id='email' />
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="subject">Subject</label>
<input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='subject' />
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="message">Message</label>
<textarea type="text" className='h-36 rounded-lg border-2 border-gray-200' id='message' />
</div>
</div>
<div className='flex flex-col justify-center items-center w-full my-6 px-4'>
<button className='h-10 w-full md:w-3/4 hover:brightness-105'>Submit</button>
</div>
</div>
</div>
</div>
<div className='flex flex-col justify-center items-center my-10 cursor-pointer hover:scale-105 ease-in duration-300'>
<Link href='/' alt='/'>
<HiOutlineChevronDoubleUp className='w-10 h-10 rounded-full shadow-lg my-4 shadow-gray-400 text-[#5651e5] p-2' />
</Link>
</div>
</div>
)
}
export default Contact然后是文件夹结构：在这里输入图像描述
回答 1
Stack Overflow用户
发布于 2022-07-06 00:38:15
经过长时间的研究，我最终解决并理解了它，
在下一个应用程序中包含一个图片的方法有两种: next/image
- 第一个是导入图像，然后将其添加到next/image组件的源属性中。
- 第二种方法是从API或任何外部URL获取这些图像--在本例中，您必须配置图像加载器，您可以从这里在这里输入链接描述了解到这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72871025
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号