javascript - 需要帮助存储 blob 并在浏览器中显示它
问题描述
我正在尝试在 React 组件中显示用于我的 API(ALPHA_3 数组)的每个国家/地区代码的图像。getFlags() 和 appendImg() 在组件中导入并执行,但看起来 imgs 已损坏/不存在。
我找到了一个 API (countryflags.io),它为我使用的每个国家/地区提供 png's - 但它使用 alpha2 命名。为了获取使用 ALPHA2 的 countryflags API,我对我的 ALPHA_3 数组进行切片,并为数组中的每个国家/地区代码发出一个获取请求。使用 alpha2 代码作为键,将 blob 作为值,所有内容都保存到 localestorage。
当我尝试显示斑点时,它们显示为损坏的图像,我无法弄清楚是什么原因造成的。另外,有没有更好的方法来存储 blob 或者 localestorage 就可以了?
const ALPHA_3 = [
'CAD',
'HKD',
'ISK',
'PHP',
'DKK',
'HUF',
'CZK',
'AUD',
'RON',
'SEK',
'IDR',
'INR',
'BRL',
'RUB',
'HRK',
'JPY',
'THB',
'CHF',
'SGD',
'PLN',
'BGN',
'TRY',
'CNY',
'NOK',
'NZD',
'ZAR',
'USD',
'MXN',
'ILS',
'GBP',
'KRW',
'MYR',
];
const base_url = 'https://www.countryflags.io';
const opts = { mode: 'no-cors', 'Content-Type': 'image/png' };
const ALPHA_2 = [];
const getFlags = () => {
ALPHA_3.forEach((element) => ALPHA_2.push(element.slice(0, -1)));
ALPHA_2.forEach((element) => {
fetch(base_url + `/${element}/flat/32.png`, opts)
.then((response) => response.blob())
.then((png) =>
localStorage.setItem(`${element}`, URL.createObjectURL(png))
);
});
};
export default getFlags;
export const appendImg = () => {
Object.values(localStorage).forEach((v) => {
let image = document.createElement(`img`);
image.src = v;
document.body.appendChild(image);
});
};
解决方案
感谢您对 localestorage 中有限的存储空间以及 URL.createObjectURL() 在刷新时中断的提醒。我重构了代码以使用缓存 API,并设法将每个速率的 alpah2 代码与响应一起保存为缓存中的键值对,使用 PUT 方法,因为 no-cors。现在我想知道,我如何访问缓存并将其从另一个文件/反应组件显示在浏览器中。
const ALPHA_3 = [
'CAD',
'HKD',
'ISK',
'PHP',
'DKK',
'HUF',
'CZK',
'AUD',
'RON',
'SEK',
'IDR',
'INR',
'BRL',
'RUB',
'HRK',
'JPY',
'THB',
'CHF',
'SGD',
'PLN',
'BGN',
'TRY',
'CNY',
'NOK',
'NZD',
'ZAR',
'USD',
'MXN',
'ILS',
'GBP',
'KRW',
'MYR',
];
const cacheFlags = async () => {
const imageCache = await caches.open('imageCache');
if (imageCache.keys().length >= 32) return false;
const base_url = 'https://www.countryflags.io';
const opts = { mode: 'no-cors', 'Content-Type': 'image/png' };
const ALPHA_2 = [];
ALPHA_3.forEach((element) => ALPHA_2.push(element.slice(0, -1)));
ALPHA_2.forEach((element) => {
let url = base_url + `/${element}/flat/32.png`;
fetch(url, opts)
.then((response) => {
imageCache.put(element, response);
})
.catch((error) => error);
});
};
export default cacheFlags;
推荐阅读
- java - Springboot:如何使用 WebClient 而不是 RestTemplate 来执行非阻塞和异步调用
- c++ - 在运行时选择模板参数的 C++ 函数
- mysql - MySQL 中是否有对应于 SQL Server 中的 FETCH ABSOLUTE 的等效语句?
- azure-ad-graph-api - 需要澄清关于 Graph Api
- css - CSS:2 行布局,仅当组合高度超过 100% 时单独滚动每一行
- javascript - 刷新页面时获取的信号器
- medium.com - 有没有办法从“medium.com”帖子中删除“特色图片”?
- php - 如何从 laravel 中的多选返回选定值的列表?
- html - 换行后边框中的空白过多 - 移动
- powershell - 如何在powershell中剪切双引号中的第一个字段