Error when converting an image

[ux-ui-pro]

Hello! 👋

I'm trying to make a Vue 3 component to output images.

I would like to pass some information about the image to this component via props. And as soon as I do this, Parcel stops converting the images. I really tried, but couldn't find a solution to this predicament.

Example AppImage.vue

<script>
export default {
  name: "AppImage",
  props: {
    width: {
      type: Array,
      default: () => [400, 800],
    },
    path: {
      type: String,
      default: '../image_01.jpg',
    },
  },
  setup(props) {
    const getImageUrl = (format, width) => {
      return new URL(`${props.path}?as=${format}&width=${width}`, import.meta.url);
    };

    const getUrlSet = (format) => {
      return props.width.map((width) => `${getImageUrl(format, width)}`).join(', ');
    };

    return {
      getImageUrl,
      getUrlSet,
      props
    };
  },
};
</script>

<template lang="html">
  <div class="image-container">


    // It's working! 😊
    <picture>
      <source type="image/avif" srcset="../image_01.jpg?as=avif&width=400, ../image_01.jpg?as=avif&width=800">
      <source type="image/webp" srcset="../image_01.jpg?as=webp&width=400, ../image_01.jpg?as=webp&width=800">
      <source type="image/jpeg" srcset="../image_01.jpg?as=jpeg&width=400, ../image_01.jpg?as=jpeg&width=800">
      <img src="../image_01.jpg" alt="">
    </picture>


    // It doesn't work 😔
    <picture>
      <source type="image/avif" :srcset="getUrlSet('avif')">
      <source type="image/webp" :srcset="getUrlSet('webp')">
      <source type="image/jpeg" :srcset="getUrlSet('jpeg')">
      <img :src="`${props.path}`" alt="">
    </picture>
  </div>
</template>

package.json

{
  "name": "...",
  "description": "",
  "author": "...",
  "version": "1.0.0",
  "private": true,
  "license": "",
  "scripts": {
    "serve": "parcel src/index.html --dist-dir dist --cache-dir .parcel --no-source-maps --open",
    "build": "rm -rf dist .parcel && parcel build src/index.html --dist-dir dist --cache-dir .parcel --detailed-report 20",
    "clean": "rm -rf dist .parcel"
  },
  "staticFiles": [
    {
      "staticPath": "src/static",
      "staticOutPath": "/"
    },
    {
      "staticPath": "src/assets/svg_sprite",
      "staticOutPath": "/"
    }
  ],
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "devDependencies": {
    "@parcel/config-default": "^2.9.3",
    "@parcel/core": "^2.9.3",
    "@parcel/packager-raw-url": "^2.9.3",
    "@parcel/plugin": "^2.9.3",
    "@parcel/resolver-glob": "^2.9.3",
    "@parcel/transformer-sass": "^2.9.3",
    "@parcel/transformer-vue": "^2.9.3",
    "@parcel/transformer-webmanifest": "^2.9.3",
    "buffer": "^6.0.3",
    "parcel": "^2.9.3",
    "parcel-reporter-static-files-copy": "^1.5.3",
    "parcel-resolver-exclude-assets": "^2.0.1",
    "sass": "^1.68.0",
    "sharp": "^0.31.1"
  },
  "dependencies": {
    "animejs": "^3.2.1",
    "axios": "^1.5.0",
    "highlight.js": "^11.8.0",
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  }
}

.parcelrc

  {
    "extends": ["@parcel/config-default"],
    "resolvers": ["@parcel/resolver-glob", "..."],
    "reporters":  ["...", "parcel-reporter-static-files-copy"]
  }

Software	Version
Parcel	2.9.3
Node	v18.17.1
npm/Yarn	1.22.19

[mischnic]

To make Parcel pick up the images, you need to have this code (literally)

      <source type="image/avif" srcset="../image_01.jpg?as=avif&width=400, ../image_01.jpg?as=avif&width=800">

or

      new URL("../image_01.jpg?as=avif&width=400, ../image_01.jpg?as=avif&width=800", import.meta.url)

And not

      const x = "../image_01.jpg?as=avif&width=400, ../image_01.jpg?as=avif&width=800";
	  new URL(x, import.meta.url)

Otherwise Parcel can't determine statically (without running your code) at build time which images to process