Benefits of using Nuxt Image Module

🧠 What you will learn from this article

• How to add File Download Feature in your website ( Traditional Way )

• Write less Javascript ( Modern Way )

• Image Optimization

• Solution to CORS ( Cross Origin Resource Sharing )

• Additional Benefits

⬇️ Integrate Download feature easily

• If you want to provide download feature for your assets ( Image, PDF, etc.. ) which are hosted on third party services ( Amazon, heroku )

• You have to write below JS Code

 async downloadImage() {
      if (this.image) {
        try {
          const response = await fetch(this.image);
          const blob = await response.blob();
          const url = window.URL.createObjectURL(blob);

          const link = document.createElement("a");
          link.href = url;
          link.download = this.filename;

          // Append the link to the body to simulate a click
          document.body.appendChild(link);
          link.click();

          // Clean up: remove the link from the body and revoke the URL object
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        } catch (error) {
          console.error("Error downloading the image:", error);
        }
      }
    }

🤔 Is there any solution to this problem

    <a :href="`/_ipx/_/${url}`" download>
    <nuxt-img src="`/_ipx/_/${url}`"/>
    </a>

😊 Forget about CORS Issue

• Second benefit is we do not have to deal with CORS issue.

• Since nuxt-img serves the assets with url /_ipx/_/https://someexample.png

More Benefits

Easily Optimize Images

<!-- Specify responsive sizes.-->
<nuxt-img
  src="/logos/nuxt.png"
  sizes="sm:100vw md:50vw lg:400px"
  />

<!-- Specify fix width height.-->
<nuxt-img
  src="/logos/nuxt.png"
   width="480px"
   height="360px"
  />

<!-- Specify Quality -->
<nuxt-img
  src="/logos/nuxt.png"
  quality="80"
  />

Much more benefits 🤩. To learn more visit the documentation. mentioned below.

Helpful Resources

• Documentation

• Github