Proyecto:
Pantalla de carga con imagen Base64 en Playcanvas ( WebGL )
Lo que trato de hacer:
Cambie la imagen cuando el sitio web se cargue con otro idioma ( index.html?language=xy )
Lo que ya tengo:
Obtengo la imagen predeterminada en mi WebGL cargando javascript.
var logo = document.createElement('img'); logo.src = 'here is my base64 code'; splash.appendChild(logo); logo.onload = function() { splash.style.display = 'block'; };Pensé que sería la mejor opción enumerar todos los idiomas en un objeto e invocar el objeto con el idioma que está seleccionado actualmente.
Por qué no puedo resolverlo yo mismo:
Como recién comencé a crear proyectos de JavaScript, necesito buscar muchas cosas, pero cuando busco mi problema, obtengo cosas como esta Codificación en Base64 de un objeto de JavaScript
Definir todas las imágenes en un objeto
const images = { 'us': 'data:image/jpeg;base64,...', 'nl': 'data:image/jpeg;base64,...', 'fallback': 'data:image/jpeg;base64,...' }Analice los parámetros de consulta , use un respaldo si no se proporciona
const urlSearchParams = new URLSearchParams(window.location.search); const params = Object.fromEntries(urlSearchParams.entries()); let lanuageKey = params['language']; if (!images[lanuageKey]) { lanuageKey = 'fallback'; }Agregue la imagen con la base64 deseada
var logo = document.createElement('img'); logo.src = images[lanuageKey]; document.body.appendChild(logo); Poniendo todo esto junto, dará algo como el siguiente fragmento:
Nota 1 : Stack Snippets no puede leer los parámetros de consulta, por lo que deberá probar esto localmente
Nota 2 : debido a los caracteres máximos de 30k, tuve que eliminar los 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);