Estoy tratando de establecer dinámicamente el fondo de un div en una imagen base64. La imagen base64 en sí se almacena en una variable de cadena, base64Image. Estoy usando la siguiente línea de código.
$("#loadingAdImage").css("background-image", `url("${base64Image}")`);Cuando inspecciono el elemento div, encuentro que aunque la línea se ejecutó, el div no tiene atributo de estilo. Incluso probé lo siguiente.
$("#loadingAdImage").attr("style", `background-image: url('${base64Image}')`);Esta vez, cuando inspeccioné el elemento div, obtuve el atributo de estilo, pero la imagen en sí no se muestra en el fondo. ¿Alguien sabe lo que está mal?
Esto debería funcionar, muestra las imágenes cargadas: -
HTML
<div id="test">JS
var pic = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfMAAAHyCAMAAADIj"; // the pic data should be a lot bigger, change it to whatever data you have // var img = new Image(); img.src = pic; $("#test").css("background-image", "url('" + img.src + "')");Use una etiqueta img para #loadingAdImage
entonces usa este código
$("#loadingAdImage").attr("src", "data:image/png;base64, "+base64Image);La única forma en que puedo pensar en dónde sucedería esto es que base64Image contenga un carácter " .
Cualquier otro valor establecería la propiedad correctamente dado su código:
const sources = [ "foo bar'¨^*-0+:.?/#`😱", // many "special" characters but no double quote "foo \"bar" // contains a double quote ]; const test = (index) => { const source = sources[index]; console.log( { source, result: $("#test" + index).css("background-image", `url("${source}")`) .attr("style") } ); }; test(0); test(1); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="test0"></div> <div id="test1"></div> Así que verifique dos veces su valor de base64Image y elimine cualquier " allí, no es parte de los caracteres de codificación base64 y no tiene nada que ver en una URL de datos codificados en base64.