The demonstration of the Astro JS Image components
Hi, I am a 17-year-old boy who is more a web dev than a college student. I love to play with JavaScript APIs and Astro JS. Experienced with HTML, CSS, SCSS, NodeJS, React JS, Gatsby JS, Astro JS, and All things JavaScript. Familiar with Next JS and Lit. I am a maintainer and contributor of the amazing Astro JS project. I am also planning to be a full-time blogger at https://softhardsystem.com/.
I get an strange error when you try to build with an a style tag on the page.
without <style><style/> it builds fine.
07:37 PM [config] Set "buildOptions.site" to generate correct canonical URLs and sitemap
07:37 PM [build] Vite started 1.6s
07:37 PM [build] ├── ✔ src/pages/admin/index.astro → /admin/index.html
07:37 PM [build] ├── ✔ src/pages/index.astro → /index.html
07:37 PM [build] ├── ✔ src/pages/blog/2022-01-31-today-it-happend-again.md → /blog/2022-01-31-today-it-happend-again/index.html
07:37 PM [build] All pages loaded 2.4s
Image at /src/images/elva-800w.jpg optimized in: 70.893ms
[vite-plugin-astro-imagetools] Could not load @astro-page-all-styles/index.js: Invalid URL
TypeError [ERR_INVALID_URL]: Could not load @astro-page-all-styles/index.js: Invalid URL
---
import Image from "../components/Image.astro";
---
<html>
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<Image
src="/src/images/elva-800w.jpg"
alt="A father holiding his beloved daughter in his arms"
artDirectives={[
{
media: "(max-width: 480px)",
src: "/src/images/elva-480w-close-portrait.jpg",
},
]}
/>
</body>
</html>Hi there
Took this for a ride and something is confusing me. When building for prod, the dist folder has only the html (with a couple inlined css images). The sources srcsets point to a /@imagetools/ folder like:
srcset="/@imagetools/78e67e6bf7c1e914075ec1ced702e3b3e9344bf1 320w, /@imagetools/258a21587184c1afbff9f335ac6a4955219fe4c7 480w"
Did i screw up something when cloning this project?
cheers
Can you, please, guide me on how to use this inside my existing project?
I've already built a site with astro but I'm looking to have all the pros of responsive images etc.
How can I achieve that?
Do I've to clone this repo into my existing project and run the commands described in the readme of this repo. Or I've to move only certain files into my project to make it work?
Thank you very much.
src="assets/[email protected]"
should be
src="/assets/[email protected]"
I wanted to try out the demo, so I did the following 👇
npm install
npm start
This is raising error on my local machine(i dont know why). However, It works perfectly fine on gitpod
Can you help me out?
start
astro dev
02:49 PM [astro] Server started 3249ms
02:49 PM [astro] Local: http://127.0.0.1:3000/
2:49:47 pm [vite] Error when evaluating SSR module /node_modules/astro-imagetools/src/component/utils/getImage.js:
SyntaxError: Unexpected token '||='
at new AsyncFunction ()
at instantiateModule (F:\codes\astro-image-demo\node_modules\vite\dist\node\chunks\dep-971d9e33.js:56176:28)
2:49:47 pm [vite] Error when evaluating SSR module /node_modules/astro-imagetools/src/component/utils/renderImage.js:
SyntaxError: Unexpected token '||='
at new AsyncFunction ()
at instantiateModule (F:\codes\astro-image-demo\node_modules\vite\dist\node\chunks\dep-971d9e33.js:56176:28)
2:49:47 pm [vite] Error when evaluating SSR module /node_modules/astro-imagetools/src/component/Image.astro:
SyntaxError: Unexpected token '||='
at new AsyncFunction ()
at instantiateModule (F:\codes\astro-image-demo\node_modules\vite\dist\node\chunks\dep-971d9e33.js:56176:28)
2:49:47 pm [vite] Error when evaluating SSR module F:\codes\astro-image-demo\src\pages\index.astro:
SyntaxError: Unexpected token '||='
at new AsyncFunction ()
at instantiateModule (F:\codes\astro-image-demo\node_modules\vite\dist\node\chunks\dep-971d9e33.js:56176:28)
02:49 PM [astro] 500 /
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.