image

image copied to clipboard

Is anyone using Firebase storage to host images? If so, is it possible to set up Firebase Storage as a provider and let Nuxt Image handle the optimization? How can I do that?

There is an example of using unsplash with ipx static provider to optimise externally hosted images using the alias option. https://image.nuxtjs.org/api/options#alias

I believe you will be able to configure firebase storage as a domain for image optimization and use the http url eg. https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg

if you find a nice way to integrate firebase storage and @nuxt/image, contribution to the docs would be nice to help others in your situation. I am happy to help get a working example into the docs.

Thanks. I think I am still not clear on how to Nuxt Image. So, if I have a third party CDN such as imagekit.io to handle the optimization, can I drop it and just use Firebase Storage directly and let Nuxt Image do the optimization for dynamic images that my users have submitted? A universal SSR app.

Otherwise, I am already using imagekit's SDK to handle the transformations in my Nuxt code, so not sure yet how the Nuxt image module would help me...

Example:

      <ik-image
        :src="post.imageUrl"
        :transformation="[{ width: 856 }]"
        height="auto"
        width="856"
        class="card-img-top"
        :alt="post.title"
      />

@nuxt/image has a built in provider called ipx which is used for static image generation and optimization it can be used in SSR.

There is a nuxt-img component as well.

There is also a specific imagekit provider.

Thanks, shadow. I think the problem is I still don't understand how I would integrate Firebase Storage for remote images and let IPX handle the optimization. My initial attempt failed. I'll see if I can get a reproduction link up.

@shadow81627 or anyone:

I am trying to use Firebase Storage as the host for my remote images. I added the domains property to the nuxt.config.js file as mentioned in the docs, but I still get broken images in my attempt. Can you check it out and tell me what I am doing wrong? Thanks!

https://codesandbox.io/s/romantic-sky-bxsxy?file=/pages/index.vue

Does the example image url you are accessing work? I am getting a 403 error for this url https://firebasestorage.googleapis.com/v0/b/pixstery3-50aa9.appspot.com/o/aircraft.jpg?alt=media&token=940822be-80ec-4b92-87a9-67bda587eed7

you need to have the domain in the url as well or you can setup an alias https://image.nuxtjs.org/api/options/#alias

OK, figured out what the problem is...and yes, I did have to add the full URL to the src, thank you, however, the "real" problem was that I had backend security rules preventing reads to the bucket. Doh! All good now, thanks.

Now I need to figure out how to get the image height and width from the server so I can use Nuxt Image's sizes prop...

@dosstx Hey man, just wondering how the security rules affect this? I've got similar issues with a bad request through IPX. I thought the generated link includes the access token and hence security rules don't come into play here? Would love to here what it was that solved it for you in the end?

@dosstx Hey man, just wondering how the security rules affect this? I've got similar issues with a bad request through IPX. I thought the generated link includes the access token and hence security rules don't come into play here? Would love to here what it was that solved it for you in the end?

Sorry for the super late reply. There was a setting in IAM section of Google Cloud that was preventing the read. I posted a stackoverflow question and answer ....now I can't find it!