0

La funcionde este codigo es que cuando insertes los datos que se escriben en un formulario se agrega una tarjeta la imagen se sube mediante un upload de html, se insertan todos los datos bien menos la imagen, aparece el alt y no encuentro el error. Anexo el script y el html del formulario para ver si me ayudan con el error se los agradecería.

Esto es un formulario que agrega cards desde un formulario, y se muestra de manera inmediata

<!-- Aquí se agregarán las nuevas cards -->
                </div><br><br>
                
                <script>
                    let cardId = 1;
                
                    function agregarNuevaCard() {
                        // Obtener los valores ingresados por el usuario
                        const nombre = document.getElementById('nombre').value;
                        const fecha = document.getElementById('fecha').value;
                        const pais = document.getElementById('pais').value;
                        const categoria = document.getElementById('categoria').value;
                        const imagenUrl = document.getElementById('imagen').value;
                
                        // Crear la nueva card con los datos ingresados
                        const nuevasCardsContainer = document.getElementById('nuevasCardsContainer');
                        const nuevaCard = document.createElement('div');
                        nuevaCard.classList.add('post');
                        nuevaCard.innerHTML = `
                            <div class="ctn-img">
                                <img src="${imagenUrl}" alt="">
                            </div>
                            <h2>${nombre}</h2>
                            <span>${fecha}</span>
                            <ul class="ctn-tag">
                                <li>${pais}</li>
                                <li>${categoria}</li>
                            </ul>
                            <a href="#modalNueva"><button class="btn-leer">Leer más</button></a>
                            <a href="#elim1"><button class="btn-eliminar">Eliminar</button></a>
                            <a href="#edi1"><button class="btn-editar">Editar</button></a>
                        `;


HTML

<form id="formularioAgregar">
                <div>
                    <label for="nombre">Nombre:</label>
                    <input type="text" id="nombre" name="nombre" required>
                </div>
                <div>
                    <label for="fecha">Fecha:</label>
                    <input type="date" id="fecha" name="fecha" required>
                </div>
                <div>
                    <label for="pais">País:</label>
                    <input type="text" id="pais" name="pais" required>
                </div>
                <div>
                    <label for="categoria">Categoría:</label>
                    <input type="text" id="categoria" name="categoria" required>
                </div>
                <div>
                    <label for="imagen">Imagen URL:</label>
                    <input type="file" id="imagen" name="imagen" required>
                </div>
                <button type="button" onclick="agregarNuevaCard()">Agregar evento</button>
            </form>
6
  • Cuando lo revisas en el navegador en modo desarrollo, no te marca error, tipo que no encontró el URL de la imagen?
    – MrDonPh0x
    Commented el 20 jul. 2023 a las 7:01
  • 1
    No, amigo no me aparece error Commented el 20 jul. 2023 a las 7:09
  • puedes agregar un ejemplo del valor que tiene la variable imagenUrl?
    – MrDonPh0x
    Commented el 20 jul. 2023 a las 7:11
  • yo en mi ultimo proyecto lleno las imagenes así: " <img src="${full.part.urlImagen.replace("~/", "../../")}" style="width: 50px" alt="">", en mi caso, yo guardo las imagenes iniciando con ~/, pero, en la pagina donde están no las detecta, así que tuve que subirlas 2 niveles para que tuvieran un path valido (por eso mi pregunta anterior)
    – MrDonPh0x
    Commented el 20 jul. 2023 a las 7:12
  • Creo que lo que buscas está en esta pregunta , aquí está el ejemplo
    – MrDonPh0x
    Commented el 20 jul. 2023 a las 7:21

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.