UseCldImageUrl

This composable is using @cloudinary-util/url-loader under the hood to generate the Cloudinary URL with certain optimizations.

Usage

The composable allows you to pass optimization options and the src of the image and in return get a full cloudinary url with the optimized images. Then, you can use this url any way you like (for example in the custom image component).

<script lang="ts" setup>
const { url } = useCldImageUrl({
  options: {
    src: "/cld-sample-5.jpg",
    tint: "40:253f8c",
    underlay: "/cld-sample-4.jpg",
    overlays: [
      {
        position: {
          gravity: "north",
          y: 60,
        },
        text: {
          color: "rgb:52a4ff80",
          fontFamily: "Source Sans Pro",
          fontSize: 320,
          fontWeight: "black",
          text: "MUSIC",
          letterSpacing: -10,
          lineSpacing: -100,
          stroke: true,
          border: "20px_solid_rgb:2d0eff99",
        },
      },
    ],
  },
});
</script>

Configuration

Apart from the image options, useCldImageUrl composable accepts two additional parameters; config and analytics.

General Options

Effect Options

All effect props are disabled by default.

View the Cloudinary docs to see learn more about using effects.

Overlay Options

The overlays prop is an array of objects with the following configuration options:

| Property Name | Type | Example | | -------------- | ------ | ------------------------------------------------ | -------------------------------- | | appliedEffects | array | Same as effects, added as applied transformation | | effects | array | See Below | | position | object | See Below | | publicId | string | "thumb" | | text | object | string | "Next Cloudinary" or See Below | | url | string | "https://.../image.jpg" |

The position property can include:

Objects in the effects array can include everything in the effects options above as well as:

The text property can include: