Comments (16)
The <Image />
component still doesn't work in static build
from astro-imagetools.
@seb-celinedesign v0.1.1
was just released that adds support for building in the static build. Can you check if it's working now?
from astro-imagetools.
Maybe an edge case due to a misconfiguration in one of my component call, but i now get this error with latest astro-imagetools 0.1.3
and Astro 0.23.7
:
/node_modules/astro-imagetools/src/component/utils/getConfigOptions.js:31
: imagesizes(requiredBreakpoints);
^
TypeError: imagesizes is not a function
at Module.getConfigOptions [as default] (/node_modules/astro-imagetools/src/component/utils/getConfigOptions.js:31:9)
at eval (/node_modules/astro-imagetools/src/component/utils/getArtDirectedImages.js:50:64)
at async Promise.all (index 0)
at async Module.getArtDirectedImages [as default] (/node_modules/astro-imagetools/src/component/utils/getArtDirectedImages.js:24:18)
at async Promise.all (index 1)
at async Module.__vite_ssr_exports__.default (/node_modules/astro-imagetools/src/component/utils/getImage.js:44:42)
at async Module.renderImage [as default] (/node_modules/astro-imagetools/src/component/utils/renderImage.js:42:28)
at async eval (/node_modules/astro-imagetools/src/component/Image.astro:18:34)
at async renderToString (/node_modules/astro/dist/runtime/server/index.js?v=c9ea2e62:332:21)
at async Module.renderComponent (/node_modules/astro/dist/runtime/server/index.js?v=c9ea2e62:130:20)
Node.js v17.6.0
from astro-imagetools.
Can you try clearing the node_modules
folder and then reinstalling the dependencies. It's an old error that was fixed in v0.0.19
from astro-imagetools.
Can you try clearing the
node_modules
folder and then reinstalling the dependencies. It's an old error that was fixed inv0.0.19
I already tried that but got the same error.
from astro-imagetools.
Can you share the code?
from astro-imagetools.
@seb-celinedesign I noticed this issue when the artDirectives
prop was passed. I have released a fix for this issue. Can you check if upgrading to v0.1.6
solves this problem?
from astro-imagetools.
@RafidMuhymin Works in dev mode now.
But when I run astro build
I've now this error :
Error rendering: [Error: Could not load /src/images/image.jpg?format=avif&w=375;750;828&class=astro-YKH54IT4&aspect=0.75: Input file is missing] {
code: 'PLUGIN_ERROR',
plugin: 'vite-plugin-astro-imagetools',
hook: 'load'
}
with
"astro": "^0.23.7",
"astro-imagetools": "^0.1.6"
(/src/images/image.jpg
is a valid path)
Component call is :
<Image
src={src}
alt={alt}
width={1920}
breakpoints={[1280, 1366, 1920]}
artDirectives={[
{
media: "(max-width: 767px)",
src: src,
width: 3,
height: 4,
breakpoints: [375, 375 * 2, 414 * 2],
},
]}
/>
from astro-imagetools.
@seb-celinedesign I'm unable to reproduce the issue with the code you provided above. Can you share a reproduction?
from astro-imagetools.
@seb-celinedesign Can you check if upgrading to [email protected]
solves this problem?
from astro-imagetools.
Ok found the issue. It's about image path.
If I remove the leading slash then in astro dev
, I've this error :
error: Cannot find module 'src/images/equipe/newpool.jpg?format=avif&w=341;682;800;1242&position=top&class=astro-HADYBIEX&aspect=0.751101321585903' imported from 'node_modules/astro-imagetools/src/component/utils/getSrcset.js'
But Works fine in astro build
If I add the leading slash then in astro build
, I've the error in my previous comment.
from astro-imagetools.
What version of astro-imagetools
are you using @seb-celinedesign ??
from astro-imagetools.
What version of
astro-imagetools
are you using @seb-celinedesign ??
Lastest 0.2.7
from astro-imagetools.
Can you check if upgrading to v0.2.10
solves this issue?
from astro-imagetools.
Can you check if upgrading to
v0.2.10
solves this issue?
astro dev
and build
broken 😩
Tried with astro 0.24.3 and astro-imagetools 0.2.10
> astro build
/dist/chunks/Image.3286bf33.mjs:8
import { fileTypeFromBuffer } from 'file-type';
^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'fileTypeFromBuffer' not found. The requested module 'file-type' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'file-type';
const { fileTypeFromBuffer } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:341:24)
at async generatePage (file:///node_modules/astro/dist/core/build/static-build.js:239:24)
at async generatePages (file:///node_modules/astro/dist/core/build/static-build.js:225:7)
at async staticBuild (file:///node_modules/astro/dist/core/build/static-build.js:115:5)
at async AstroBuilder.build (file:///node_modules/astro/dist/core/build/index.js:74:7)
at async build (file:///node_modules/astro/dist/core/build/index.js:19:3)
at async cli (file:///node_modules/astro/dist/cli/index.js:127:9)
astro dev
🚀 astro v0.24.3 started in 134ms
┃ Local http://10.0.1.2:3000/
┃ Network http://10.0.1.2:3000/
13:10:41 [serve] 500 /
13:10:41 [error] Error: Input file is missing
node:internal/process/promises:279
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: Input file is missing]
Node.js v17.6.0
from astro-imagetools.
Problem solved, that was an image path problem. Paths need a trailing slash. As the documentation's said…
from astro-imagetools.
Related Issues (20)
- could not find astro-imagetools in VSCode IDE HOT 5
- Disable tracedSVG preview if the source image format is unsupported?
- Incorrect documentation for BackgroundPicture
- Condition of this code
- Cannot read properties of null (reading 'slice')
- Cloudflare Pages - Segmentation fault; command exited with code: 139 HOT 3
- Dynamic ESM import?
- What is Regular Image Optimization?
- Is dynamic import even possible? HOT 3
- Image Detail Modal
- bug: astro-imagetools crashing the serverless function with vercel adapter HOT 1
- How to remove default styles from image? HOT 5
- Astro 3.2: Top-level await is not available in the configured target environment
- Can't syle with CSS HOT 10
- astro imagetools Picture and BackgroundImage tags not works after upgrade packages HOT 1
- CI builds fail because of missing imagetools-core
- is not a valid Img Config Option HOT 6
- `npm audit` finds dependency vulnerabilities
- Server crashes if the image is missing or not found.
- Wrong image src attributes, but correct in source tag and srcset HOT 4
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 astro-imagetools.