Quiero optimizar mis imágenes dinámicamente usando el optimizador de imágenes integrado de Parcel 2. La URL de la imagen proviene de data.js y luego la paso para renderizarla.
Cuando uso este código, está funcionando:
_generateMarkupProjects(project) { const imageUrl = new URL('../../images/projectOne.webp?width=640', import.meta.url); return ` <div class="projects__box"> <figure class="projects__img-box"> <picture> <img src="${imageUrl}" sizes="(max-width: 800px) 45vw" alt="${project.name} Photo" class="projects__image" /> </picture> <figcaption class="projects__caption"> <button class="projects__maximize-btn" data-id="${project.id}"> <svg class="projects__icon"> <use xlink:href="${icon}#icon-maximize" ></use> </svg> </button> <div class="projects__caption-content"> <h3 class="projects__caption-title u-mb-xxs"> ${project.name} </h3> <p class="projects__caption-description u-mb-xxs"> ${project.description} </p> <div class="projects__language">${project.languages.join( ', ' )}</div> </div> </figcaption> </figure> </div> `; }Pero cuando hago esto: el paquete no optimiza la imagen.
const imageUrl = new URL(`${project.image}?width=640`, import.meta.url);Así es como importo la imagen del proyecto:
//data.js import projectOne from 'url:../images/projectOne.webp';Creo que este es el comportamiento esperado, desafortunadamente. Parcel debe poder determinar cómo transformar la imagen (dimensiones, calidad, etc.) de forma estática en el momento de la compilación. Esto solo se puede hacer si encuentra una referencia a la ubicación de la imagen, junto con los parámetros de consulta que especifican las transformaciones deseadas en un solo lugar (por ejemplo, const imageUrl = new URL("./image.webp?width=640", import.meta.url); o import imageUrl from "url:./image.webp?width=640"
Parece que su intención es crear una función que acepte direcciones URL de imágenes (sin transformar) como parámetro y luego aplique dinámicamente una transformación de width . Para hacer esto correctamente en el momento de la compilación, Parcel necesitaría tener una comprensión completa del flujo de su código en el tiempo de ejecución; por ejemplo, ¿qué URL de imágenes no transformadas se alimentarán a la función y, por lo tanto, deben transformarse? Podría ser conocible en un caso simple, pero sería casi imposible de resolver de una manera general.
Entonces, creo que necesita refactorizar su código para que aplique la transformación de width cuando haga referencia a la imagen en primer lugar (por ejemplo, en data.js ). Si necesita varios tamaños de imagen, puede hacer que el objeto del proyecto tenga varias propiedades, una para cada tamaño, por ejemplo:
const project1 = { smallImageUrl: new URL(`../images/projectOne.webp?width=240`, import.meta.url); bigImageUrl: new URL(`../images/projectOne.webp?width=640`, import.meta.url); // etc. }