Comments (10)
I think Image is the src in your case so you should use
<img src="{Image}">
If you need metadata which can return the image as an object then you should import this way:
import Image from '../../static/test.jpg?w=400&metadata';
In the above case Image will be an object with an src attribute so you can use {Image.src} with metadata.
from imagetools.
I'm sorry @parence I was mistaken when I said I have essentially the same setup, I didn't notice one important difference: The vite config object should go into the kit object, so it should be:
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter(),
vite: {
plugins: [imagetools()]
}
},
};
PR would be an overkill for this. Also, I actually only noticed this mistake when I cloned your minimal repo and VSCode underlined that part in the config as a problem, I think it's worth setting up a code editor to do things like that, it can save you a lot of time.
Maybe the same mistake is present in your config @yndotdev?
from imagetools.
Thank you for your explanations and suggestions!
I tried
<img src="{Image}">
as you suggested and I can confirm that while using this approach the image is displayed. However, the transformations don't seem to be applied (i.e. in the above example image's width is not 400, it's still in its original resolution).
I also tried adding &metadata
and Image
is still a string (not an object as expected).
Something seems broken in the set up I posted above, which is just bare bones sveltekit + imagetools. But I don't see any errors during build. Is there something else I need to configure?
from imagetools.
I have essentially the same setup and I use it the same way (except I use the ?meta shorthand and I use $static/ instead of the relative path).
Try imagetools({ force: true}) in the vite config, that is a deprecated option which in the past enabled the plugin in dev mode. Or try a different version (I use "vite-imagetools": "^4.0.3").
Sorry I couldn’t help more, your setup should work.
from imagetools.
The explanation @KocsisGabor gave it correct, so appending &metadata
should return you an object with a number of properties (src
is one of them) while normally you get a string - the url to the transformed image.
If you @parence could share a quick minimal repro of your issue I can have a look.
from imagetools.
Thanks @KocsisGabor, I have tried with {force: true}
but without any success. I'm also using the same version as you.
@JonasKruckenberg I have pushed a skeleton project here: https://github.com/parence/imagetools-sveltekit
from imagetools.
I have the same issue as @parence w/ Sveltekit. I am also using version ^4.0.3
from imagetools.
@KocsisGabor you are absolutely right. That solved it for me!
I misunderstood the sveltekit docs concerning the svelte config. Do you mind sharing how you configured your linter? I have eslint configured in my project and it definitely complains when I introduce other errors in my svelte.config.js. However, in this case it remained completely silent.
Thanks!
from imagetools.
Glad you guys figured it out! 👍🏻
from imagetools.
@parence, These kinds of errors are reported by the ts language server on my machine which I believe is turned on by default in VSCode.
I actually tried to find the relevant config but I just couldn’t, even when I removed everything (tsconfig.json, .eslintrc.cjs, jsconfig) and even turned off everything in vs code settings that seemed relevant it still showed me this error (also the error was present on the skeleton project so I’m sure it’s some setting in VSCode).
The only other thing I can think of is maybe VSCode needs typescript to be installed globally.
npm install -g typescript
from imagetools.
Related Issues (20)
- Query strings don't work in dynamic imports with template literals containing variables HOT 8
- Upgrading to Vite 4.4.0 broke vite-imagetools HOT 5
- imagetools-core 4.0.4 `resolveConfigs` behavior change, `format` directive no longer working
- Build and build -w output differs HOT 6
- as=source and as=srcset both outputting srcset with all the same width params HOT 3
- manifest.json is generated incorrectly HOT 2
- Upgrading Vite-imagetools 5.0.8 throws an error from 4.x version HOT 2
- generateImageID causes tests to fail on CI HOT 3
- Vite example has a typo HOT 1
- Renaming picture fallback to img is not reflected in the document HOT 1
- Waste less effort transforming images
- Dependency on sharp not declared correctly for yarn’s PnP loader HOT 9
- Vite plugin crash HOT 2
- Loading attribute HOT 1
- v6 broken due to missing sharp 0.33 binariers HOT 3
- Some images get rotated for some reason HOT 14
- crop from / "gravity" HOT 1
- Error: Unable to parse color from string: ##ffaa22
- Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax
- How to receive access to original image in `extendOutputFormats` after v7.0.0? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imagetools.