nextjs-image 相关问题


使用 qr-image 生成 Wi-Fi QRCode

npm 模块 qr-image 允许使用 NodeJS 生成 QRCode,如下所示: 从“qr-image”导入 qr; 从 'fs' 导入 fs; qr.image('https://google.com/search?q=hello%20world!', {type:'...


NextJS-auth0 发生意外令牌错误

我有一个使用 nextjs-auth0 包的 nextjs 应用程序。当我尝试使用此导入测试文件时: 从 '@auth0/nextjs-auth0' 导入 { getSession }; 我收到以下错误: 开玩笑没能...


NextJS 中 useFormStatus() 始终为 false

我尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。 我有一个像这样的表单组件 函数 onSubmit(数据:z.infer 我正在尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。 我有一个像这样的表单组件 function onSubmit(data: z.infer<typeof FormSchema>) { requestImg(data).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setOpen(true); setSource(imageBase64); }); } if (isDesktop) { return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6" > ... 其中 requestImg(data) 是服务器操作。 然后,我将 Button 组件嵌套在不同的 Button.tsx 文件中的 <form> 中 import { useFormStatus } from "react-dom"; import { Button } from "@/components/ui/button"; export default function ButtonSub() { const { pending } = useFormStatus(); console.log(pending); return ( <Button className="w-full" type="submit" aria-disabled={pending}> {pending ? "Processing..." : "Submit"} </Button> ); } 问题是,当我单击提交时,按钮文本不会更改为“正在处理...” 编辑 似乎仅当您在表单上使用操作关键字时才有效。我试过了 <form action={async (formData: FormData) => { requestImg(formData).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setSource(imageBase64); setOpen(true); }); }} className="w-2/3 space-y-6" > 但是现在使用 byte8Array 生成的图像已损坏。 我有一个带有动态 src 的图像,其中充满了 const [source, setSource] = useState(""); <img src={source}/> 似乎只有在您使用 action 关键字时才有效 形式。 确实如此。 useFormStatus 必须在表单的子组件内使用,它可以监视服务器操作的状态变化。但据我所知,它会监听 action。 action 定义提交后表单数据的服务器端目的地。在服务器操作的上下文中,服务器操作向当前 URL 发出 post 请求。所以它没有监听表单 onSubmit,这就是为什么你的第一个代码执行不起作用。 现在服务器操作在服务器上下文中运行,它们在服务器上执行,但setState是客户端特定的代码


使用批处理脚本重命名多个文件

我有很多这种格式的文件: D:\images\AAA_BBB\image\whatever1.jpg D:\images\AAA_BBB\image\whatever2.jpg D:\images\FFF_EEE_CCC\图像 sdf1.jpg D:\images\FFF_EEE_CCC\图像 sdf2.jpg D:\我...


nuxt 3 中的 nuxt/image 模块导致生产出现问题

使用 Nuxt/Image 模块并构建应用程序时,图像 URL 将更改为 https://domain.x/_ipx/_/images/foods/Appetizaer/Garlic-Bread.png。然而,图像不能被看...


为什么Nextjs 14显示按钮与next/font和tailwind不同?

我正在尝试升级到nextjs 14,但坚持如何使用next/font。我有两个具有完全顺风类的按钮,只是最后一个的 nextjs 字体类名不同 这是我的代码 我...


在 NextJs 中使用绝对路径导入不起作用

我在路由中创建了一个名为 jsconfig.json 的文件: { “编译器选项”:{ “baseUrl”:“。” } } 我有最新的 nextjs "next": "latest" 当前...


无法访问“<init>”:它在“Image”中是包私有的

Android studio,我想用内置方法“Image”发布一个简单的图像。编译器抛出了我在标题中发布的内容。 我正在尝试不同的图像选项和 ImageView 没有


如何禁用Nextjs预渲染页面?

如何才能真正实现 NextJs 应用程序中的 CSR(客户端渲染)某些页面? 文档说,页面中存在 getServerSideProps 或 getStaticSiteProps 会使其预先


NextJS 14 服务器操作抛出“无法重新定义属性”错误

我正在开发一个 NextJS 14 项目,并努力实现新的服务器操作功能,该功能在一段时间前引入了我的 NextJS 作为常规 API 调用的替代方案。这是一个精简版...


如何禁用nextjs中某些文件夹的eslint?

我想在 NextJs 中执行 npm run build 时禁用某些文件夹的 eslint 我不想这样配置: 模块. 导出 = { eslint: { dirs: ['pages', 'utils'], // 仅在 ... 上运行 ESLint


Cloudflare 页面 NextJS 环境变量未被读取

我在 cloudflare 页面上托管 NextJS 站点,但我无法读取环境变量。 在本地,我在 .env.local 中使用: NEXT_PUBLIC_API_URL=https://localhost:5001/ 并在代码中读取它: 常量


从 NextJS 中的服务器组件重定向

在我的 NextJS 项目中,我有一个路由(“/dashboard”),它是一个服务器组件,我想根据某些条件让用户重定向到主页(“/”),但我不是


尝试将我的 nextjs 项目从 babel 迁移到 swc,它会抛出错误“当前未启用对实验性语法‘jsx’的支持”

我正在尝试将我的 NextJS 项目(NextJS 版本 13)从 babel 迁移到 swc。这是我的 bablerc 文件。我不断收到错误“当前未启用对实验性语法‘jsx’的支持...


从react-native-image-crop-picker录制视频在android 13 - Tab(三星Galaxy Tab A8)中不起作用

我在我的react-native应用程序中使用react-native-image-crop-picker并从Android中的相机录制视频它正在返回[错误:用户取消了图像选择] 笔记: 它正在工作...


React Native 图像选择器不工作:任务:react-native-image-picker:compileDebugJavaWithJavac 失败

我一直在尝试将react-native-image-picker集成到我的React Native Android应用程序中,但是在按照设置说明进行操作后我遇到了问题。该应用程序无法正确加载图像选择器...


SwiperJS 样式不适用于 NextJS

我已将 SwiperJS 安装到我的 NextJS 项目中。我完全按照 Swiper 教程文档进行操作,但是当我尝试对 .swiper、.swiper-slide 等类进行样式设计时出现问题...样式...


useForm 和react-hook-form 在我与NextJs 一起使用时出现问题

我正在 NextJs 中编码,我需要使用“useForm”,但它不断给出错误......“无法解析“react-hook-form”。”请帮忙。 从“反应”导入反应; 导入{使用...


使用 NextJS 进行 Docker 热重载

我在使用 Docker 和 NextJS 设置热重载时遇到了麻烦,基本上当我尝试更改和保存文件时,它不会重新加载服务器。 以下是 docker-compose.yml: 版本:'3'


无法在 Nextjs 应用程序上验证 JWT 令牌

我正在尝试验证 Nextjs 中的 JWT 令牌,但收到如下错误 类型错误:“instanceof”的右侧不是对象 下面是我正在使用的代码 使用效果(()=> { ...


使用 NextJs 将 www 永久重定向到非 www 站点

我用Nextjs建立了一个网站(使用版本12.1.4)。出于 SEO 目的,我想将网站的 www 版本永久重定向到非 www 版本。通常这很容易完成...


如何解决 nextjs 中 telegram bot api 的问题

我的 nextjs 应用程序有问题:问题在于一个函数,其目的是通过 bot api url 将信息发送到电报,在本地,它可以完美运行,无需任何 ty...


一个js函数调用多个html canvas的draw和drawImage方法可以保存到单个Image对象中吗?

一个js函数调用多个html canvas的draw和drawImage方法可以保存到单个Image对象中吗? 一直在寻找一种方法来做到这一点。我正在考虑利用 html canvas cli...


如何在IIS上正确运行NextJS(13.4)?

ExpressJS 应用程序在 IIS 上运行良好,但是当我尝试安装 NextJS 时遇到此错误 我遵循了本文中的指南,但似乎我遗漏了一些东西。 项目设置 我...


如何获取nextjs/supabase中最后插入的id

在我当前的项目中,我使用的是supabase 和nextjs。发生了一些奇怪的事情,在将一行插入表中后,我想获取该行的 id,但它不起作用,我不知道为什么。


使用useSearchParams()在nextjs中获取动态数据

有人曾经在 nextjs 中从页面路由器迁移到应用程序路由器吗? 我在页面路由器上遇到动态数据迁移问题,它使用 useRouter().query 检索页面上的动态数据,其中...


使用 Context 和 Firestore 预渲染 NextJS 时出错

我正在尝试将我的 React 简单电子商务应用程序转换为 NextJS,但在弄清楚如何在使用 Context 时预渲染我的产品数据时遇到问题。问题是,我不需要动态的


canvas drawImage() 渲染 Font Awesome 图标

我需要使用画布drawImage()渲染字体很棒的图像。 drawImage 接受图像参数: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#image 一个元素...


我的 nextjs 项目中的信号存在一些问题

“使用客户端”; 从“react”导入 React, { useEffect, useState }; 从“framer-motion”导入{ AnimatePresence,运动}; 从“...


尝试导入错误:“swr”不包含默认导出(导入为“useSWR”)。 - nextjs 13

我使用nextjs 13.4.7制作项目并已经在3台PC中安装了swr,但我得到了同样的错误: 尝试导入错误:“swr”不包含默认导出(导入为“useSWR”)。 错误类型错误:...


在NextJS中使用动态路由时如何将对象传递给页面组件?

我正在 NextJS 中使用“app”路由器,并希望在动态创建博客帖子页面的上下文中使用动态路由。 我在弄清楚如何通过 Ob 考试时遇到问题...


React-Pixi 入口/react-pixi 中的屏蔽

我用于精灵的图像比所需的大得多(910px)。我需要动态更改容器的高度,遮盖图像。 有谁知道如何做到这一点? 我用于精灵的图像比所需的大得多(910 像素)。我需要动态更改容器的高度,遮盖图像。 有人知道该怎么做吗? <Container x={x} y={y} width={width} height={height}> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> @inlet/react-pixi: "^1.1.9" pixi.js: "^5.2.0" react: "^16.12.0" react-dom: "^16.12.0" 不幸的是,这也不起作用,因为纹理保持静态,而矩形四处移动 <Graphics draw={(g) => { g.clear() const texture = new PIXI.Texture.from(image) g.beginTextureFill(texture) g.drawRect(x, y, width, height) g.endFill() }} /> 试试这个: const maskRef = useRef() <Container mask={maskRef?.current} x={x} y={y} width={width} height={height}> <Graphics name="mask" draw={React.useCallback( (g) => { g.beginFill(0x000000) g.drawRect(0, 0, size.width + 3, size.height + 3) g.endFill() }, [width, height] )} ref={maskRef} /> <Sprite image={image} anchor={[0, 0]} x={0} y={0} width={width} height={910} rotation={0} /> </Container> 官方文档位于此处,解释其工作原理和局限性


org.apache.commons.logging.LogFactory 在构建时无意中初始化了

我正在使用 GraalVM 21、JDK 21、Ubuntu 22.04 LTS # 在 Ubuntu 22.04 操作系统 (WSL 2) 上 chmod +x mvnw ./mvnw -Pnative spring-boot:build-image 日志 [信息] [创建者] - '-H:+


为什么Python的Tkinter Image函数无法定位PNG文件?

回溯(最近一次调用最后一次): 文件“c:\Users\####\Desktop\Python_Demo_Projects\Quiz_Program\problematic.py”,第 51 行,位于 上一张幻灯片() 文件“c:\Users\#...


jq 如何获取特定孩子的所有父母

您好,我有以下 json 并尝试获取所有拥有“linux-image-amd64”的父母 { "web-prode-01.example.de": "错误:安装软件包时遇到问题。


jq 如何获取特定孩子的所有父母

您好,我有以下 json 并尝试获取所有拥有“linux-image-amd64”的父母 { "web-prode-01.example.de": "错误:安装软件包时遇到问题。


ant design如何设置app宽字体

我正在使用 NextJS 14,我有以下内容: 全局.css: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap'); @层r...


Astro.js <Image>组件问题

我正在使用 Astro (v.4.0.8) 开发一个应用程序,我遇到了一个无法解决的问题。我想渲染图像并导入特定的 svg 以及来自 '... 的


无法在 Next JS 中显示来自 FastAPI 的 blob 图像

所以我有自己的使用 FastAPI 构建的 API,它返回一个图像 返回响应(内容= img_byte_arr.getvalue(),media_type =“image / jpeg”) FastAPI Swagger 中一切正常...


有没有办法在nextjs中创建动态路由以使用查询参数打开链接?

我正在尝试使用 nextjs 创建一个动态链接,这将表明您的帐户已通过验证。对于每个注册的用户,该页面的链接都会有所不同,并且链接看起来像......


如何在下一个js应用程序路由器中实现mui风格的组件而不使用“使用客户端”

我想在nextjs 14中使用mui风格的组件,但在每个页面上我必须写“使用客户端”,我想使用nextjs ssr功能但它强迫我进行csr,如何实现它?请


Flutter 和 NextJS 中的 SEO

我在 Flutter SEO 上真的很挣扎。 根据这篇文章,Flutter 中的 SEO 不好 https://docs.flutter.dev/platform-integration/web/faq#search-engine-optimization-seo 我在想如果


当页面的某个部分触发请求时,如何避免 Nextjs 显示整个页面的加载状态?

我有一个使用loading.tsx方法的nextjs页面,所以当这个页面加载时,我的加载微调器会出现,直到整个页面加载完毕,这很酷。但是,在此页面中我有一张弹出卡


在 NextJS 中使用 JSON 文件作为分页

我正在构建一个科学博客,其中帖子的 URL 存储在静态 JSON 文件中。 ScienteTopics.json- [ { “科目”:“数学”, “章节”:&...


我无法让 Mapbox 在我的 NextJs 项目中工作

从 'react' 导入 React, { useEffect, useRef, useState }; // eslint-disable-line import/no-webpack-loader-syntax // @ts-忽略 从'!mapbox-gl'导入mapboxgl; 导入'mapbox-gl/dist/mapbox-gl....


使用 CLI 导入 Apache Superset 问题

我正在使用 docker image 运行 apache superset 实例,UI 工作正常,我已成功创建数据源和仪表板,然后将其导出为 zip 文件。 我的问题是每当我尝试...


React Native 展会图像缓存键功能

我正在尝试将 expo-image 包与预签名的 S3 图像一起使用。但是,即使我之前已经加载过图像,加载图像也需要几秒钟的时间。由于...


Docker Image 不会在 Azure DevOps 中构建,但会在 Visual Studio 2022 中构建

这是我使用 Visual Studio 2022 创建的 dockerfile: #请参阅 https://aka.ms/customizecontainer 了解如何自定义调试容器以及 Visual Studio 如何使用此 Dockerfile 来构建...


如何为与其容器比例不同的图像创建平移和缩放效果?

我有以下简单的代码来平移和缩放图像(从[此处]稍作修改:(https://www.cssscript.com/image-zoom-hover-effect/) 函数 imageZoom(容器, img) { 反对...


如何在不重新加载页面的情况下发送带有文件的表单?

我尝试在ajax中发送表单而不重新加载页面,但我看到,文件上的链接不存在...... 我有下一个表格: 我尝试在ajax中发送表单而不重新加载页面,但我看到,文件上的链接不存在... 我有下一个表格: <form id="settings" method="POST" enctype="multipart/form-data"> ... <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">save</button> </form> Ajax 脚本: $('#settings').submit(function(e){ e.preventDefault(); var form = $(this).serialize(); alert(form); // file is not attached... $.ajax({ url : '/settings', type : 'POST', crossDomain : false, data : form, contentType : 'multipart/form-data', dataType : 'json', progressData: false, cache : false, success : function(r){ alert (111); } }).fail(function(){ console.log('Error occured!'); }); }); 在服务器端,我收到错误: org.apache.tomcat.util.http.fileupload.FileUploadException:请求被拒绝,因为未找到多部分边界 我尝试不序列化表单,而是写了 data : form -> data : new FormData(this) 此选项会导致错误“非法调用”。如何在不重新加载页面的情况下发送带有文件的表单? 要使用 AJAX 发送带有文件的表单而不重新加载页面,您需要使用 FormData 来正确处理文件上传。 <form id="settings" method="POST" enctype="multipart/form-data"> <!-- Other form fields --> <input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">Save</button> </form> $(document).ready(function() { $('#settings').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/settings', type: 'POST', data: formData, contentType: false, processData: false, cache: false, success: function(response){ alert('Form submitted successfully!'); // Handle the response from the server }, error: function(){ console.log('Error occurred!'); } }); }); });


© www.soinside.com 2019 - 2024. All rights reserved.