-
Notifications
You must be signed in to change notification settings - Fork 493
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Image handling #60
Comments
Gridsome currently processes local images which can be used with the |
Sounds good to me. I'm still finding my way around gridsome but link me up if you'd like me to test a pull request. |
Just dropping this in here in case it helps and so I can find it again: https://www.wildsmithstudio.com/blog/remote-images-with-gatsby/ |
I'm having a lot of problems with the
This produces output like:
In the Gridsome tests it looks like something like this should work:
Unfortunately webpack doesn't pick this up and the end result is the src is still Can you provide some clarity around the use of the component? Where should images be placed in the filesystem and how should they be referenced? How do the other attributes work? Finally, this is possibly a feature request (I could make a different issue if it is), is it possible to provide a height and have the image cropped (and resized) so that the ratio is not automatically used as it appears to be now? It would be great to be able to specify square thumbnails for example and have images prepared to suit. |
Oh, just to note that in my working example above I've provided the width attribute but this is ignored. I've been able to pass in the width by specifying it as a query in the require:
I've had no success specifying more complex things like an array of sizes. |
@tanc Take a look here on how to get images that are added to GraphQL: https://gridsome.org/docs/images#insert-images-via-graphql-query . Would that help? |
I have the same issue with g-image tag. I'm loading some images at build time in '~/assets/images' folder and store their paths in graphql nodes. Then I'm querying them on page and insert relative paths in src of components through Vue's props. But gridsome doesn't process paths and they stay relative. |
@IrwinBridge please see this comment. I guess it is your use case. |
Dropping in with a related question. Is it possible to bind the |
Any plans on this would be great. |
Not sure what happens, but I always reach this issue when trying to use
Resolve: should be setup a document better for that
|
Hey guys, I have created two plugins to download images from a remote url. Maybe this helps you to solve your problem: https://github.com/noxify/gridsome-plugin-remark-image-download |
I'll give the plugin a try, but curious if there has been any progress on building this in natively? It really feels like the only major item missing from Gridsome after a few weeks using it. |
Any example how to use simple local image from assets? |
@gustawdaniel, this works for me alright: <g-image src="~/assets/images/<image-name>.png" class=""/> |
I've been feeling the pain of using @gridsome/source-airtable recently. It seems Airtable has blocked hotlinking images so I NEED to be able to download images when building. |
What about images referenced from the static folder? It seems that they are not processed either. <g-image src="/images/hero/Microsoft-.NET-1366x768.png"/> I have to reference some images placed in the static folder, so I can also use the same paths to them in meta tags using vue-meta (Would love to know if there was a better way around this). Lazy loading also doesn't seem to work for these images. |
I'm revisiting this after the original post 1.5 years ago... and still really struggling! It is not clear to me in the documentation what g-image is expecting if provided a My current experiment is this: I have a This new field with the local path is then passed through a graphql query to the It would help my understanding if I knew the following:
On question 2, it looks like graphql needs to process my field as type |
@tanc Yes, a path like that should work if you pass it as a static string to
The object should have been generated for you if the field is an {
src: 'https://example.com/image.jpg',
srcset: ['https://example.com/image-small.jpg 400w', '...', '...'],
sizes: '',
dataUri: 'data:image/svg+xml, ...', // uri encoded svg string
size: {
width: 1000,
height: 1000
}
} And btw, I wouldn't recommend having images that shall be processed in the |
Thank you! That explanation makes perfect sense. The missing piece of the puzzle was the |
@hjvedvik sometimes I see my images in graphql get processed as type
Is this a bug or something wrong with my files? The file opens as a jpeg in an image viewer and has exif data saying its taken with a Canon EOS 550D |
@tanc Would love to see some clear instructions on how to get this working. Showing how to also get the path to the image with the random hash on the end in a component (so I can use the image in vue-meta) would be an added bonus. |
@RehanSaeed I'll try and write up some examples very soon. I'm still working my way through a site I've already built to use |
@hjvedvik I found the problem with those jpegs, its due to the file extension being uppercase and not in the array of
Might be worth adding uppercase JPG as I know some cameras output their files with uppercase extensions. I got around the issue be preprocessing the files when they are downloaded and changing the extension to lowercase as well as doing the same on my custom field added in For other's benefit, at the moment my
|
@RehanSaeed here is a gist of my final working gridsome.server.js file. It is set up to work with Drupal but I imagine you could adapt it to any CMS as long as the images are all of the same type. In my case, with Drupal as the remote source, the images in GraphQL have a The downloading of images will only be triggered on the At the moment the system doesn't account for modified/updated images, all it does it check if they already exist in the download directory A future enhancement will be to store the modified date contained in the metadata of the I hope that helps with your efforts. It would be good to turn this into a plugin at some point but to do that we'd need to know how other systems present their files to Gridsome. It might also be worth seeing if the plugin @noxify wrote could be expanded on to include a method like this. I hope this helps! |
So i'm having similar issues in my Gridsome and Strapi project. For starters here is the link on my post.vue page located inside of my pages/blog/Post.vue and this works and shows the image in the post page. But say if i go to my regular blog page or any other page where their files are located in pages/ directory then the images doesn't show even with the same g-image tag as above. Oh and example.com isn't the real URL, the real url is an public facing ip address. Any help with this would be appreciated, i've also tried just regular img tag and still nothing. |
I'm wondering what the current and future concepts around image handling are? For example, if I have image tags in the content from a remote API, how would I fetch and use them within gridsome?
The text was updated successfully, but these errors were encountered: