0
141
VistasMi función Javascript solo muestra código en mi página HTML
Estoy tratando de agregar HTML desde mi archivo JS con innerHTML y solo muestra texto en mi archivo HTML en lugar de leerlo como imagen. Este es mi archivo JS y la siguiente función está dentro de una clase.
setCardHtml(){ let imageHtml = this.cards.map((image) => `<img class="cards base-cards" src="/images/${image}.png">`).join('') for (let image of imageHtml) { elements.playerCards.innerHTML += image } }Esto es lo que termina mostrándose en mi HTML cuando alojo el sitio. Las imágenes que se muestran son solo imágenes de marcador de posición en mi archivo HTML.
Revisé tres veces la ruta a mis imágenes para asegurarme de que conduce a la imagen y no creo que ese sea el problema, pero esta es la estructura de mis archivos.
+--_html-css-js | +--_css | | +--bj.css | +--_js | | +--bj.js | +--_html | | +--bj.html +--_images +images.png2 Respuestas
Responde la pregunta0
Entonces, lo que sucede es que creó una cadena (que es una matriz de caracteres) cuando let imageHtml = this.cards.map((image) => ).join('') . Luego, recorrió cada carácter y lo agregó junto con la cadena completa al HTML interno.
Sería suficiente simplemente hacer elements.playerCards.innerHTML += imageHtml .
setCardHtml(){ let imageHtml = this.cards.map((image) => `<img class="cards base-cards" src="/images/${image}.png">`).join('') elements.playerCards.innerHTML += imageHtml }0
Al usar join , está convirtiendo la matriz en una cadena. Su segundo ciclo itera sobre la cadena y agrega un carácter al .innterHTML del elemento de destino en cada iteración. No necesitas el segundo bucle en absoluto. Solo necesita elements.playerCards.innerHTML = imageHtml .
Dicho esto, es mejor usar las API de DOM para modificar el documento. Usar innerHTML es muy ineficiente. Compruebe ¿Cuál es el mejor código JavaScript para crear un elemento img?