gridsome.org
gridsome.org copied to clipboard
gridsome
Added "Dynamic Image Paths in Vue Templates"
As suggested by @sergeyfilimonov , I added the solution @jeremyjackson89 provided in (https://github.com/gridsome/gridsome/issues/292) for using dynamic image paths in g-images.
Thanks for writing this up @knightspore!
I think this is more of a hack than something we want to recommend. I've tried this on a repo with 200+ images and pages and it took a huge toll on performance. Gridsome was generating tons of giant JSON files in my assets that end-users had to download on each page navigation.
@tomtev @hjvedvik - thoughts?
@mtlynch can you explain in more detail? I'm not super knowledgeable about Gridsome internals but I don't see why dynamic image path resolution would cause such a situation nor am I able to duplicate it.
My original comment about the improving the documentation had more to do with the example provided in the docs not working. I agree that this is looks hacky, but in practice it is quite effective.
Image path resolution seems to be one of the biggest issues with Gridsome at the moment. I find it extremely difficult to work with images using anything other than a hardcoded file path.
Would it be a worthwhile endeavor to provide some sugar around this syntax?
@mtlynch Yes, I agree. I don't think we should recommend it. As you've experienced, It can quickly lead to unwanted results because of how webpack handles dynamic asset paths.
@spaceneenja The thing about dynamic paths is that webpack converts the path into a regex, and then includes all asset paths matching the regex in the bundle (not just images). I opened a PR a while ago, where I've tried to make this easier or safer, but I don't feel it's a good solution yet. So I haven't merged it yet. And we also need to investigate if supporting this will make it harder to implement incremental builds etc.
Do I understand correctly that there is no way to add dynamic image urls (unless hacky)?
I'm trying to create a component for an image, but without :src="image", it doesn't have any use. I tried this with g-image and normal img tag, but both don't seem to work.
What's the status of this?
