Image issue

[Anshu-Shar]

How can i deploy the image on the shopify store through url? I have implemented the graphql query it is working fine but in the local code how can i send the url like-https://explosion-globe-giant-mm.trycloudflare.com/uploads/gemstone/image_1706105049048.png the above url is using authentication and host as well so how can i use this?

[Mini-Sylar]

Hm i'm not sure what you mean. But it seems like you're trying to upload a file from your app to shopify store.

In that case take a look at Uploading files to shopify using graphql

[Anshu-Shar]

Hm i'm not sure what you mean. But it seems like you're trying to upload a file from your app to shopify store.

In that case take a look at Uploading files to shopify using graphql

Thanks

[Anshu-Shar]

Hello @Mini-Sylar ,

I want to upload the image in the web/uploads folder and it is uploadig successfully so how can i access this image in the frontend vue file. if i am using the-https://waves-louise-unlikely-galleries.trycloudflare.com/uploads/imageName.it is not working. Could you please help me out on this?

[Mini-Sylar]

By web/uploads folder i'm assuming you mean the one on your server and not shopify's CDN

In that case here's how I would handle it

Step 1

let's assume I have a folder in my web directory called uploads. I can serve resources direcly using: ├── web │ ├── index.js │ ├── uploads │ │ ├── team_img_1.jpg

# ....Your existing code
app.use(shopify.cspHeaders());

// Serve images from the "uploads" directory
app.use("/api/images", express.static("uploads"));

Step 2

I then setup an action in my store (e.g counter.js from the template) to fetch from uploads directory:

import { useAuthenticatedFetch } from '../helpers/useAuthenticatedFetch'
const useFetch = useAuthenticatedFetch()
# Other existing code
const fetchImages = async (image) => {
    try {
      const response = await useFetch(`/api/images/${image}`)
      if (!response.ok) {
        throw new Error(`Failed to fetch image: ${response.status}`)
      }
      const blob = await response.blob()
      return URL.createObjectURL(blob)
    } catch (error) {
      console.error(`Failed to fetch image: ${error.message}`)
      return null
    }
  }

 return { /*others*/, fetchImages }

Step 3

Then it's as simple as calling my action in my vue file

<template>
 <div class="fetch-image">
        <button @click.prevent="fetchImage('team_img_1.jpg')">Fetch Image</button>
 </div>
 <img :src="image" />
</template>

<script setup> 
// useToast and other stuff

const fetchImage = async (imageName) => {
  await appBridge.dispatch(Loading.Action.START)
  useToast('Fetching image')
  try {
    const response = await useProductCounterStore().fetchImages(imageName)
    image.value = response
    await appBridge.dispatch(Loading.Action.STOP)
  } catch (error) {
    await appBridge.dispatch(Loading.Action.STOP)
  }
}
</script>

Screenshot

• 

Final Image

[Anshu-Shar]

OK,Thank You so much ,I will implement this and Let you know if it will work.