Estoy tratando de insertar una imagen a través del backend usando una URL extraída de una base de datos e intento mostrarlas dinámicamente en función de un gasto que un usuario quiere ver cuando hace clic en el botón cómo más. Soy nuevo en remplates, así que me cuesta entender la sintaxis y el proceso de usar esto.
Botón Mostrar más que se muestra en la plantilla de la página HTML
showMoreBtn.innerText = 'Show More' showMoreBtn.addEventListener('click', () => { // const img = document.createElement('img') // img.src = `uploads/${exp.expFile}` // img.src = 'uploads/user2-165015.jpeg' console.log('exp File Path', exp.expFile) })Código de plantilla utilizado en el archivo HTML
</template> <template id="expList"> <section class="expSection"> <h1 id="expID"></h1> <h2 id="expLabel"></h2> <p><button class="showMoreBtn" ></button></p> <!-- <img id="expImage" src="uploads/user2-1650152674035.jpeg" width="400" height="300"> --> </section> </template>La pregunta sería cómo insertaría dinámicamente estas imágenes de las rutas tomadas de una base de datos, ya que es complicado con las plantillas. cualquier ayuda es apreciada. Gracias
Primero necesita obtener su elemento de section :
const section = document.querySelector(".expSection");Y luego, para agregarlo a su página, necesita:
section.appendChild(img);