diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 1e303f5..e0c2637 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -138,7 +138,7 @@
                 <template v-for="cellIndex in totalCells" :key="`bg-${sprite.id}-${cellIndex}`">
                   <img
                     v-if="spriteIndex !== cellIndex - 1 && !(activeSpriteId === sprite.id && ghostSprite)"
-                    :src="sprite.img.src"
+                    :src="sprite.url"
                     class="absolute pointer-events-none"
                     :style="{
                       left: `${getCellPosition(cellIndex - 1).x + gridMetrics.negativeSpacing + sprite.x}px`,
@@ -161,7 +161,7 @@
               <template v-for="(sprite, index) in layer.sprites" :key="sprite.id">
                 <img
                   v-if="!(activeSpriteId === sprite.id && ghostSprite)"
-                  :src="sprite.img.src"
+                  :src="sprite.url"
                   class="absolute cursor-move"
                   :style="{
                     left: `${getCellPosition(index).x + gridMetrics.negativeSpacing + sprite.x}px`,
@@ -182,7 +182,7 @@
           <!-- Ghost sprite (while dragging) -->
           <img
             v-if="ghostSprite && activeSpriteId"
-            :src="activeSpriteSprite?.img.src"
+            :src="activeSpriteSprite?.url"
             class="absolute pointer-events-none"
             :style="{
               left: `${ghostSprite.x}px`,
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 47d07fb..04a1b87 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -32,7 +32,7 @@
                   <template v-for="layer in getVisibleLayers()" :key="`${layer.id}-${i}`">
                     <img
                       v-if="layer.sprites[i]"
-                      :src="layer.sprites[i].img.src"
+                      :src="layer.sprites[i].url"
                       class="absolute pointer-events-none"
                       :style="{
                         left: `${cellDimensions.negativeSpacing + layer.sprites[i].x}px`,
@@ -53,7 +53,7 @@
             <template v-for="layer in getVisibleLayers()" :key="layer.id">
               <img
                 v-if="layer.sprites[currentFrameIndex]"
-                :src="layer.sprites[currentFrameIndex].img.src"
+                :src="layer.sprites[currentFrameIndex].url"
                 class="absolute"
                 :class="{ 'cursor-move': isDraggable }"
                 :style="{
@@ -195,7 +195,7 @@
                   <div v-for="(sprite, index) in compositeFrames" :key="sprite.id" class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer rounded" @click="toggleHiddenFrame(index)">
                     <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-3.5 h-3.5 text-blue-500 focus:ring-blue-400 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700" @click.stop @change="toggleHiddenFrame(index)" />
                     <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden flex-shrink-0">
-                      <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
+                      <img :src="sprite.url" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
                     </div>
                     <span class="text-xs dark:text-gray-200">{{ index + 1 }}</span>
                   </div>