-
-
Notifications
You must be signed in to change notification settings - Fork 56
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
Request for documentation on use with remote images #130
Comments
The answer is yes and no. Since vite is a bundler it can only understand local files. That's all it does. This is why the vite-plugin-remote-assets fetches the specified file and caches it on your disk. Your bundled website then includes a copy of the original image that has been transformed. If you still want to fetch the image from that remote url when the website loads (maybe its a dynamic image or something) then vite-imagetools can't help you. |
@JonasKruckenberg Thanks, in this case, that will have to do. The content in question is coming from graphCMS and it won't be updated very often. I suppose I could trigger a build each time a new post is published. However, I could not get vite-plugin-remote-assets to work with svelteKit... Will be making an issue there. In general, I guess I was looking for something like, say, Next's Image component and found vite-imagetools. Works great I have to say, even if not exactly what I was looking for. |
I did manage to get However, unless I am missing something, I can't see how I could use I guess what would need be done is to somehow "hook" into Either that or to invoke a
My page in (svelteKit) pseudocode:
|
I'm gonna assume that, because you said you're new to vite, that you are also new to the way rollup works, so let me explain:
The way rollup (and by extension site, since it uses pretty much the same approach) handles this, is by exposing hooks. It's important to note that all of the hooks that actually transform anything, get called once per import, so every import can be resolved individually. If a plugin changed anything in the dependency-graph (or the file itself) these changes will be passed on to later plugins and hooks. The remote-assets-plugin goes through your whole project in the second phase and turning remote urls into local file paths. so the following configuration should work:
import { defineConfig } from 'vite'
import remoteAssets from 'site-plugin-remote-assets'
import { imagetools } from 'site-imagetools'
export default defineConfig({
plugins: [
remoteAssets(),
imagetools()
]
}) |
Firstly, thanks for taking the time to explain! But my problem remains in that I have not found how to call imagetools on these new files as I don't know their names at the time... From your explaination on how vite works, the new files generated by If you look in the simplified code below, I have access to an array of posts that have (or haven't) an img.url. These, I can put into image tags like so:
And then they are "replaced" at build by the All imagetools examples and documentation I found mention this syntax:
... won't do as at the time when I write the markup code, I do not know the filename (a hash is attached to the filenames by the Can you suggest a way of achieving this? Thank you again. |
Ohhh, I See what the problem is now! You're trying to circumvent the plugin system in a way it doesn't work though. You have to access to the intermediate output of plugins without writing one yourself. import remoteImage from 'https://example.com/foo.jpg' // this will be turned into node_modules/.remote-assets/foo.jpg
// this weird replacing makes it easier for Vite to resolve the path
const transformedImage = await import(`/node_modules/.remote-assets/${remoteImage.replace('/node_modules/.remote-assets/')}?width=500&height=200`)
// transformedImage should now point to the transformed image |
@JonasKruckenberg Thanks a lot for your feedback! |
Hey guys, I don't really get the trick. The setup svelte.config.js import adapterStatic from "@sveltejs/adapter-static";
import RemoteAssets from "vite-plugin-remote-assets";
import { imagetools } from "vite-imagetools";
export default {
kit: {
adapter: adapterStatic(),
target: "#svelte",
vite: {
plugins: [RemoteAssets, imagetools({ force: true })],
},
},
}; Image.svelte <script>
import remoteImage from "url from cms here";
// As far as I know, it should not be possible to write a remote url in an import statement
// The dynamic import shown above didn't work for me either.
export let image;
</script>
<img
srcset={transformedImage}
alt={image?.alternativeText || ""}
/> I am loading the the url at build time using How would this be implemented using |
@tw1t611 Did you ever find a solution for this? It seems like a pretty common task, but I'm stuck at the same point. |
Hi, disclaimer: I am new to vite.
All the examples / docs I could find are using something like:
import Img from 'some/local/path'
.In many real-world projects, assets are actually fetched from somewhere remote. Is it possible to use vite-imagetools for remote images e.g. fetched from an API when the actual source is a url over https?
Should something like vite-plugin-remote-assets be used for that?
The text was updated successfully, but these errors were encountered: