小编Zso*_*ros的帖子
部署后，next/image 不会从外部 URL 加载图像
我使用 Next.jsImage组件进行图像优化。它在开发人员上工作得很好，但它不会从生产中的外部 URL 加载图像。
我能做什么？
推荐指数
解决办法
查看次数
Next Image 组件在生产中抛出 404 错误，在开发中工作正常
我在隐藏的图库中有一堆图像，仅当用户单击某个按钮时才显示。
在开发服务器上，一切都很好，没有错误或问题，但是当我部署网站并打开图库时，图像不会显示，并在控制台中抛出 404 错误（我包含了所需的道具）。
当我用 替换<Image/>组件时<img>，开发服务器上的一切都很好。有人可以帮忙吗？我搜索了很多，但没有找到类似这个问题的内容。
推荐指数
解决办法
查看次数
Next.js 视口元标记不应在 _document.js 的 <Head> 中使用
我想使用视口元标记禁用_document.jsNext.js 文件中的页面缩放。
<Html>
<Head>
<link rel="icon" href="/static/images/logo/favicon.png" type="image/png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
</Html>
但它不起作用，并表示不应在_document.js's 中使用视口元标记<Head>。
我该如何解决？
推荐指数
解决办法
查看次数
Next.js 搜索本地目录中的图像而不是 AWS 上的图像
我们正在将我们的应用程序从 Create React App 转换为 Next.js。
Next.js 应该从 AWS 加载图像，但这种情况没有发生。为什么？
几天前它起作用了。您认为这是缓存问题还是什么？
你有什么想法吗？
在 Next.js 中，应用程序从此本地 URL 加载图像：
http://localhost:3000/_next/image?url=https%3A%2F%2Fticket-t01.s3.eu-central-1.amazonaws.com%2Fob8h_0.cover.jpg&w=1200&q=100
next.config.js:
const { nextI18NextRewrites } = require("next-i18next/rewrites");
const localeSubpaths = {
hu: "hu",
en: "en"
};
module.exports = {
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths
},
images: {
domains: ["ticket-t01.s3.eu-central-1.amazonaws.com"]
}
};
1 图片标签：
<Image
src={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${props.imgId}_0.cover.jpg`}
className={styles.imageEventMain}
alt="main event"
layout="responsive"
width={1795}
height={1000}
quality={100}
/>;
在 React 中，AWS 或图像加载没有问题。
编辑
尝试访问图像时的console.log：
推荐指数
解决办法
查看次数
Discord.js：无效的位字段标志或数字：GUILDS
我正在第一次尝试制作 Discord 机器人。该代码非常基本，只是一个在启动时将自己的标签记录到控制台的机器人：
const Discord = require("discord.js");
const TOKEN = "REDACTED"
const client = new Discord.Client({
intents: ["GUILDS", "GUILD_MESSAGES"]
})
client.on("ready", () => {
console.log(`Logged in as ${client.user.tag}`)
})
client.login(TOKEN)
然而，在node index.jsVSCode 终端输入内容后，出现以下错误：
PS C:\Users\15055\Documents\Alt Formatter> node index.js
C:\Users\15055\Documents\Alt Formatter\node_modules\discord.js\src\util\BitField.js:168
throw new RangeError(ErrorCodes.BitFieldInvalid, bit);
^
RangeError [BitFieldInvalid]: Invalid bitfield flag or number: GUILDS.
at IntentsBitField.resolve (C:\Users\15055\Documents\Alt Formatter\node_modules\discord.js\src\util\BitField.js:168:11)
at C:\Users\15055\Documents\Alt Formatter\node_modules\discord.js\src\util\BitField.js:163:54
at Array.map (<anonymous>)
at IntentsBitField.resolve (C:\Users\15055\Documents\Alt Formatter\node_modules\discord.js\src\util\BitField.js:163:40)
at Client._validateOptions (C:\Users\15055\Documents\Alt Formatter\node_modules\discord.js\src\client\Client.js:481:41)
at new Client (C:\Users\15055\Documents\Alt Formatter\node_modules\discord.js\src\client\Client.js:78:10)
at Object.<anonymous> …推荐指数
解决办法
查看次数
discord.js v14 中的 setPresence 活动类型只能设置为“PLAYING”
当我尝试设置机器人的状态时，我不知道类型，基本上有 4 种方式：PLAYING、WATCHING、LISTENING和STREAMING。但我不能设置任何其他的，我只能使用默认的PLAYING。
是我不专心还是在新的更新中不能像这样？
client.user.setPresence({ activities: [{ name: `discord.js v14`, type: `WATCHING` }], status: 'dnd' })
推荐指数
解决办法
查看次数
从 Vuex 调用 Mixin 全局方法
我有一个像这样的 mixin 和一个请求方法来调用 axios 并处理错误等：
import Vue from 'vue'
import axios from 'axios';
Vue.mixin({
methods: {
request(url, datas) {
//Call axios and return premise
[...]
}
});
我有一家这样的商店：
const actions = {
selectEmployees: (store, keywords) => {
this.request(`/users/list/search{/keywords}`).then(e => {
store.commit('SELECT_EMPLOYEES', e.data)
});
}
}
let store = new Vuex.Store({
state: state,
mutations: mutations,
getters: getters,
actions: actions
})
我想使用 request 来调用 axios 但我有这个错误：
挂载钩子错误：“类型错误：无法读取未定义的属性‘请求’”类型错误：无法读取未定义的属性‘请求’
推荐指数
解决办法
查看次数
如何在 Storybook 中模拟 Next.js Image 组件？
Next.jsImage在 v10 中引入了一个新组件，它应该是<img>标签的替代品。
尝试查看导入next/imageStorybook 的组件时出现错误：
TypeError: imageData is undefined
我一直在尝试覆盖图像对象preview.js（我使用的一种技术next/router，如此处所述），但我遇到了相同的错误：
// .storybook/preview.js
import Image from 'next/image';
Image = ({ src }) => <img src={src} />;
知道如何覆盖next/imageStorybook 中包的行为吗？
推荐指数
解决办法
查看次数
NextJS 错误：构建项目时未定义组件道具（在开发模式下一切正常）
我有这个组件在开发模式下完全正常，但是在构建它时告诉我open道具undefined即使它工作正常，当我console.log在本地主机上时我得到正确的结果。
const FAQ = ({ faq, index, toggleFAQ }) => {
return (
<div
className={`${Styles.faq} ${faq.open ? Styles.open : ""}`}
key={index}
onClick={() => toggleFAQ(index)}>
<div className={Styles.question}>
<div className='flex justify-between'>
<div style={{ width: "90%" }}>
<span>{faq.question}</span>
</div>
<div className='m-auto ml-24'>
{faq.open ? (
<img src='faq1.svg' alt='' srcSet='' />
) : (
<img src='faq2.svg' alt='' srcSet='' />
)}
</div>
</div>
</div>{" "}
<div className={Styles.answer}>
<span>{faq.answer}</span>
</div>
</div>
);
};
我传递道具的地方：
const FAQpage = () => { …推荐指数
解决办法
查看次数
如何在 Next.js 中获取可重用布局组件的数据
我需要将 slugs 放入 Header 组件中，该组件可在布局内的所有网站中重复使用：
const Layout = ({ children }) => {
return (
<>
<Header />//////////this one.
{children}
<Footer />
</>
);
};
我的 slugs 来自服务器端，我只需要在标头中动态获取它们一次。
标题内部类似：
categoriesLinks.map(category=> {
return <div>{category.SLUG}</div>
})
但因为它是一个可重用的组件，我不知道如何以及在哪里调用getServerSidePropsor getStaticProps。
- 例如，如果我使用索引组件，我需要在每个组件中获取数据
getInitialProps如果我尝试在 中获取它_app，它不会获取它（获取undefined）
处理这个问题的正确方法是什么？这似乎是一个非常大的问题，我找不到合适的解决方案。
推荐指数
解决办法
查看次数
标签 统计
next.js ×7
reactjs ×6
javascript ×5
nextjs-image ×4
discord ×2
discord.js ×2
node.js ×2
bots ×1
html ×1
storybook ×1
vue.js ×1
vuejs2 ×1
vuex ×1