Comments (8)
Probably not the best possible solution,
You can always make defaultDirectives more specific using conditionals as specified in docs under options:
imagetools({
defaultDirectives: (url) => {
if (url.searchParams.has('spotify')) {
return new URLSearchParams({
tint: 'ffaa22'
})
}
return new URLSearchParams()
}
})
and instead of long string you can use it as your "own" directive.
You can also use more complicated conditions.
I solved it by just appending the rest at the end.
imagetools({
defaultDirectives: (url: URL) => {
const extension = url.pathname.substring(url.pathname.lastIndexOf('.') + 1);
if (['png', 'jpg', 'jpeg'].includes(extension)) {
return new URLSearchParams(
'format=avif;webp;' + extension + '&as=picture&w=2000;1000;500' + url.searchParams
);
}
return new URLSearchParams();
}
}),
But i can also imagine ignoring all defaults by using
imagetools({
defaultDirectives: (url: URL) => {
if (url.searchParams.has('custom')) {
return url.searchParams;
}
return new URLSearchParams();
}
}),
from imagetools.
Thanks, this works as a solution.
But it is still quite weird that with normal imports the default directives are overwritten, but with dynamic imports they are not (at least this was the case when I submitted this issue, I have not tried to reproduce since then).
from imagetools.
It would be interesting to see if this is still the case, I remember that dynamic imports are behaving slightly differently to regular imports in vite.
from imagetools.
This seems to work for me
Can anyone provide a project that reproduces this? Otherwise I'll assume it works and close the issue
from imagetools.
@benmccann I think you misunderstood, the problem is that static imports can override the defaultDirectives defined in vite config, but dynamic imports cannot.
I can still reproduce the issue. (repo: https://github.com/refact0r/imagetools-575)
imagetools({
defaultDirectives: () => {
return new URLSearchParams({
blur: '10'
});
}
}),
<script>
import { onMount } from 'svelte';
import static_image from '../../static/favicon.png?blur=1';
let dynamic_image;
let name = 'favicon';
onMount(async () => {
dynamic_image = (await import(`../../static/${name}.png?blur=1`)).default;
});
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<p>static import</p>
<img src={static_image} alt="Svelte logo" />
<p>dynamic import</p>
<img src={dynamic_image} alt="Svelte logo" />
from imagetools.
Ok, so there are more parts to this. It's not that you override a defaultDirective, but it's that you use a template literal that has a variable together with a query string. This one will have to be addressed in Vite: vitejs/vite#14449
I'll note that I also hit vitejs/vite#14101 while debugging this
from imagetools.
Ah, that makes sense.
from imagetools.
This will be fixed in Vite 5. Thanks to @Dunqing for the fix!
from imagetools.
Related Issues (20)
- 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 2
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.