JavaScript 包含多个 Base64 图像代码的对象

Question

项目：

正在用 Playcanvas 中的 Base64 图像加载屏幕 (WebGL)

我尝试做的事情：

当网站加载其他语言时更改图像(index.html?language=xy)

我已有的：

我在我的 WebGL 加载中获得了默认图像 javascript。

 var logo = document.createElement('img');
    logo.src = 'here is my base64 code';
    splash.appendChild(logo);
    logo.onload = function() {
    splash.style.display = 'block';
    };

我认为最好的选择是列出一个对象中的所有语言，并使用当前选择的语言调用该对象。

为什么我自己也想不通：

因为我刚开始创建 javascript 项目，我需要查找很多东西，但是当我搜索我的问题时，我得到了这样的东西

Answer 1

定义对象中的所有图像

const images = {
  'us': 'data:image/jpeg;base64,...',
  'nl': 'data:image/jpeg;base64,...',
  'fallback': 'data:image/jpeg;base64,...'
}

Parse the query paramters，如果没有给出则使用回退

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

let lanuageKey = params['language'];
if (!images[lanuageKey]) {
    lanuageKey = 'fallback';
}

添加具有所需 base64 的图像

var logo = document.createElement('img');
logo.src = images[lanuageKey];
document.body.appendChild(logo);

将所有这些放在一起，将给出类似于以下代码段的内容：
_{注意 1：Stack Snippets 无法读取查询参数，因此您需要在本地尝试此操作}
_{注释 2：由于最大 30k 个字符，我不得不删除 base64 的}

const images = {
    'us': 'data:image/jpeg;base64...',
    'nl': 'data:image/jpeg;base64...',
    'fallback': 'data:image/jpeg;base64...'
}

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

let lanuageKey = params['language'];
if (!images[lanuageKey]) {
    lanuageKey = 'fallback';
}

var logo = document.createElement('img');
logo.src = images[lanuageKey];
document.body.appendChild(logo);

JavaScript 包含多个 Base64 图像代码的对象

JavaScript object containing multiple Base64 image codes

javascript

object

webgl