Simplemente estoy tratando de insertar un SVG de exclamación aquí, pero parece que no puedo hacerlo y no puedo encontrar una respuesta adecuada en Google.
El SVG se descarga y se encuentra dentro de la carpeta de mi proyecto.
if(email.validity.valueMissing) { emailError.textContent = '(SVG Here) You need to enter an e-mail address.';Suponiendo e-mailError es un elemento de visualización en su html (span, p, div, etc.), el icono y el texto asociado se pueden cargar configurando la propiedad .innerHTML del elemento.
El uso de .textContent dará como resultado que se muestre el texto de marcado en lugar del diseño previsto (como ha encontrado)
Este fragmento de trabajo demuestra la diferencia.
const emailError=document.getElementsByClassName("emailError"); emailError[0].innerHTML = '<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> You need to enter an e-mail address.'; emailError[1].textContent = '<img src="https://stackoverflow.design/assets/img/logos/sf/sf-icon.svg" /> You need to enter an e-mail address.'; img { width: 40px; aspect-ratio: 1; } span { border: 1px solid black; display: flex; align-items: center; } <p>Example loaded using .innerHTML:</p> <p><span class="emailError"></span></p> <p>Example loaded using .textContent:</p> <p><span class="emailError"></span></p>