Issue #2705✓ ResueltoAbierto el 7 de abril de 2020por andy-awareReacciones 2

Añadir tamaños de imagen a imagen

Respuesta rápidapor artf2

@awaredigital probablemente la mejor solución sería seguir la sugerencia de escuchar los cambios 'src', luego encontrar el asset adecuado y actualizar los atributos en consecuencia '''js modelo: { init() { this.on('change:src', this.onSrcUpdate); }, onSrcUpdate() { const src = this.get('src'); recursos const = editor....

Lee la respuesta completa abajo ↓

Pregunta

Cuando añado un atributo de imagen a la página, me doy cuenta de que dentro del componente la imagen tiene atributos propios.

Cuando llamo mis imágenes al gestor de activos lo hago así:

    tipo: 'imagen',
    Src: 'http://placehold.it/350x250/459ba8/fff/image2.jpg',
    altura: 350,
    Ancho: 250

Sin embargo, la altura y el ancho no están disponibles cuando la imagen se añade al lienzo. He intentado conseguir las tallas haciendo:

'component.views[0].el.height'

y añadirlo al objeto, pero cada vez que lo intento obtengo 0 porque la imagen aún no está disponible en el DOM, así que no sabe qué tamaño tiene.

¿Hay alguna forma de pasar estas alturas y anchos a la imagen? Necesito esto para algunas funciones de carga perezosas que estoy haciendo. Actualmente estoy haciendo esto en una actualización

editor.on('component:update', component => {
    elemento const = componentes.atributos.attributes;
			
element['width'] = component.view.el.width;
    ítem['altura'] = componente.vista.el.altura;

console.log(editor. AssetManager.getAll());
    console.log('Comp:', component.views[0].el.height);
    console.log(image.naturalWidth);
			
});

¿Debería añadir atributos antes de esto?

Gracias.

Respuestas (3)

👍 Muy útilartf20 de abril de 2020

@awaredigital probablemente la mejor solución sería seguir la sugerencia de escuchar los cambios 'src', luego encontrar el asset adecuado y actualizar los atributos en consecuencia '''js modelo: { init() { this.on('change:src', this.onSrcUpdate); }, onSrcUpdate() { const src = this.get('src'); recursos const = editor. AssetManager.getAll(); const asset = assets.filter(asset => asset.get('src') == src)[0]; si (activo) { ancho const = activo.get('width'); ancho && this.addAttributes({ ancho }); // ... } } }

pouyamiralayi9 de abril de 2020

Hola @awaredigital revisa #2696 comment, que actualiza los estilos cada vez que cambia el ''src''. ¡Salud!

andy-aware9 de abril de 2020

Hola @pouyamiralayi, gracias por la respuesta, pero no es eso lo que busco hacer. Quiero añadir altura y anchura al propio elemento de imagen. Por ejemplo, en este momento, la imagen aparece así:

'<img src="http://placehold.it/350x250/459ba8/fff/image2.jpg" id="123" />'

Lo que quiero hacer es insertar la imagen con la altura y el ancho correspondientes.

'<img src="http://placehold.it/350x250/459ba8/fff/image2.jpg" id="123" altura="350" ancho="250" />'

Sin embargo, no veo cómo hacerlo.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.