当我使用plaiceholder插件在NextJ中模糊图像时，为什么有更多图像时会崩溃？
我使用以下代码模糊远程图像，当图像数量很小时，它可以执行，但是现在我有50张图像，并且在项目运行后浏览器被卡住了。
优化它的最佳方法是什么？是由Plaiceholder插件还是由NextJS本身引起的？
import fs from 'fs';
import path from 'path';
import { getPlaiceholder } from 'plaiceholder';
import { PhotoData } from '../types';
const directory = path.join(process.cwd(), 'data');
export async function getPhotos() {
const filePath = path.join(directory, 'photos.json');
const jsonData = fs.readFileSync(filePath, 'utf8');
const photosData = JSON.parse(jsonData).sort((a: PhotoData, b: PhotoData) =>
new Date(b.date) > new Date(a.date) ? 1 : -1
);
const photosProps = await Promise.all(
photosData.map(async (photoData: PhotoData) => {
const { thumbnail } = photoData;
const { base64, img } = await getPlaiceholder(thumbnail);
return {
...img,
blurDataURL: base64,
};
})
).then((values) => values);
return {
photosProps,
photosData,
};
}
I use the following code to blur the remote images, when the number of images is small it can be executed, but now I have 50 images and the browser gets stuck after the project runs.
what is the best way to optimize it? Is it caused by the plaiceholder plugin or by nextjs itself?
import fs from 'fs';
import path from 'path';
import { getPlaiceholder } from 'plaiceholder';
import { PhotoData } from '../types';
const directory = path.join(process.cwd(), 'data');
export async function getPhotos() {
const filePath = path.join(directory, 'photos.json');
const jsonData = fs.readFileSync(filePath, 'utf8');
const photosData = JSON.parse(jsonData).sort((a: PhotoData, b: PhotoData) =>
new Date(b.date) > new Date(a.date) ? 1 : -1
);
const photosProps = await Promise.all(
photosData.map(async (photoData: PhotoData) => {
const { thumbnail } = photoData;
const { base64, img } = await getPlaiceholder(thumbnail);
return {
...img,
blurDataURL: base64,
};
})
).then((values) => values);
return {
photosProps,
photosData,
};
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我正在尝试实施类似的事情，但预测一个类似的问题，前端会变得凌乱。因此，在我的情况下，我将尝试在后端存储哈希图像。
如果您仅使用NextJ，则可以尝试在NextJS Backend中执行此操作。
我认为您可以从杰克·赫林顿（Jack Herrington） https://www.youtube.com/watch?v=ffhsiio4acu＆amp; t = 803S
I am trying to implement a similar thing, but predict a similar issue and frontend will get messy. So, I will try to store the hash images in the backend, in my case, using my cms.
If you are using only nextjs, you can try to do that in nextjs backend.
I think you can get the inspiration on how to do that from the below video by Jack Herrington https://www.youtube.com/watch?v=FfHsIio4aCU&t=803s