Cloudfront cdn is requesting both transformed and non transformed images.

[DerekAlanGilbert]

Bug report for Cloudinary Vue SDK

Before proceeding, please update to latest version and test if the issue persists

It persists 👍

Describe the bug in a sentence or two.

Browsers are fetching the untransformed image first and then replacing it with the correct transformed image. (causing increased costs)

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [x] Cross browser - cross-browser issues .. not babel related [ ] UI/Performance - Display or performance issues [x] Behaviour - Functions aren’t working as expected (Such as generate URL) [ ] Documentation - Inconsistency between the docs and behavior [ ] Incorrect Types - For typescript users who are having problems with our d.ts files [ ] Other (Specify)

Steps to reproduce

Specifically in safari, in the sources tab you will see after a soft refresh that a duplicate image that does not contain the correct transformations in there.

Error screenshots

Browsers (if issue relates to UI, else ignore)

[ ] Chrome [x] Firefox [x] Safari [ ] Other (Specify) [ ] All

Versions and Libraries (fill in the version numbers)

Vue Cloudinary SDK - 1.0.1 Vue - 2.6.11 VueCLI - 0.0.0 / N/A Babel - 7.9.6 Webpack/Rollup/Other - @nuxt/webpack is using ^4.42.1 Node - v12.10.0 NPM - 6.10.3

Config Files (Please paste the following files if possible)

Package.json

{
  "name": "web-listings",
  "version": "1.0.0",
  "description": "My stunning Nuxt.js project",
  "author": "derekalangilbert",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "build-prod": "cross-env NODE_ENV=production nuxt build",
    "build-dev": "cross-env NODE_ENV=development nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
  },
  "dependencies": {
    "@homiedev/homie-tailwind": "^1.0.8",
    "@microsoft/applicationinsights-web": "^2.4.4",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-module": "^1.2.0",
    "@nuxtjs/google-gtag": "^1.0.4",
    "@nuxtjs/tailwindcss": "^1.4.1",
    "@nuxtjs/webpackmonitor": "^0.1.0",
    "applicationinsights": "^1.7.2",
    "axios": "^0.19.2",
    "axios-cache-adapter": "^2.5.0",
    "cloudinary-vue": "^1.0.1",
    "cross-env": "^5.2.0",
    "current-script-polyfill": "^1.0.0",
    "dotenv": "^8.2.0",
    "koa": "^2.6.2",
    "luxon": "^1.22.0",
    "node-sass": "^4.14.0",
    "nuxt": "^2.0.0",
    "sass-loader": "^8.0.0",
    "vue-image-lightbox": "^6.4.0",
    "vue-observe-visibility": "^0.4.6",
    "vue-svgicon": "^3.2.6",
    "vuelidate": "^0.7.4"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "husky": "^2.6.0",
    "jest": "^24.1.0",
    "lint-staged": "^8.2.1",
    "nodemon": "^1.18.9",
    "prettier": "^1.16.4",
    "vue-axe": "^1.1.0",
    "vue-jest": "^4.0.0-0"
  }
}

Repository

note: This project has completely different dependencies, but has the same issue.

https://github.com/DerekAlanGilbert/cloudfront-image-transform-bug

[patrick-tolosa]

Thanks @DerekAlanGilbert for your detailed report.

We're currently investigating the possible solutions to this issue, we'll update once we have more information.

[mayashavin]

fixed in #117