Comments (4)
Hey,
we've kind of solved this issue (partly) as follows:
vite.config.js
const directives = {
imagecardPreview: new URLSearchParams(
'format=webp;jpg&width=438&height=250&position=entropy&quality=60&meta',
),
};
imagetools({
include: '**/*.{heic,heif,avif,jpeg,jpg,png,tiff,webp,gif}*',
defaultDirectives: (id) => {
// scan images without search params. These kind of images might be
// imported dynamically, where search params wont work.
if (id.search === '') {
if (id.pathname.includes('discretize-guides/guides/')) {
return directives.imagecardPreview;
}
}
return id.searchParams;
},
})
You don't add any search params to the imported picture at all, but instead do "the work" in the defaultDirectives.
Maybe this piece of info could help you to create a solution for your problem?
from imagetools.
I believe this would potentially also be fixed by @rollup/plugin-dynamic-import-vars
stripping query strings before it tries to use your template string as a glob to resolve all possible files you could be importing, then appending them again afterwards.
If this type of "query string in file import" path pattern is common, perhaps that would be a reasonable feature request for rollup/plugins?
from imagetools.
This is how Vite works and really isn't specific to imagetools at all. Vite can only handle static strings in imports and not dynamically constructed strings. Given that there isn't anything we can do about this in imagetools, I'm going to go ahead and close this
from imagetools.
Although I guess it's supposed to work in some cases: https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url. However, that case would be covered by #327, so I'll leave this closed in favor of that issue.
from imagetools.
Related Issues (20)
- 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
- Resize image to fit in box
- Querying for GIF's metadata removes animation
- How to use with SSR
- Use the <Image> component HOT 2
- Plugin output is not reproducible HOT 1
- Wrong output path when building in Laravel project HOT 9
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.