A React component for responsive images in Remix
Home Page: https://remix-image.mcfarl.in
License: MIT License
I'm Josh, I like working on different projects!
For fun I made chess using React/Remix that runs in my profile.
Repo: https://github.com/Josh-McFarlin/remix-chess
You are the white piece. Click a piece to select it and it will turn blue. The green squares show where you can move.
| A | B | C | D | E | F | G | H | |
|---|---|---|---|---|---|---|---|---|
| 8 | ||||||||
| 7 | ||||||||
| 6 | ||||||||
| 5 | ||||||||
| 4 | ||||||||
| 3 | ||||||||
| 2 | ||||||||
| 1 |
📖 Learn More About Me:
📫 How to reach me:
if i use i with the express app setup, the resizer api is extremely slow.
my api endpoint:
import type { LoaderFunction } from "@remix-run/node";
import { imageLoader, MemoryCache } from "remix-image/serverPure";
import { sharpTransformer } from "~/lib/image-transformer";
export const loader: LoaderFunction = ({ request,params }) => {
return imageLoader(
{
selfUrl: "http://localhost:8080",
cache: new MemoryCache(),
defaultOptions: { quality: 75 },
transformer: sharpTransformer
},
request
)};my express server (./server.js):
const path = require("path");
const express = require("express");
const compression = require("compression");
const morgan = require("morgan");
const { createRequestHandler } = require("@remix-run/express");
const BUILD_DIR = path.join(process.cwd(), "build");
const app = express();
app.use(compression());
app.disable("x-powered-by");
app.use(
"/build",
express.static("public/build", { immutable: true, maxAge: "1y" })
);
app.use(express.static("public", { maxAge: "1h" }));
app.use(morgan("tiny"));
app.all(
"*",
process.env.NODE_ENV === "development"
? (req, res, next) => {
purgeRequireCache();
return createRequestHandler({
build: require(BUILD_DIR),
mode: process.env.NODE_ENV,
})(req, res, next);
}
: createRequestHandler({
build: require(BUILD_DIR),
mode: process.env.NODE_ENV,
})
);
const port = parseInt(process.env.PORT) || 8080;
app.listen(port, () => {
console.log(`app listening on port ${port}`);
});
function purgeRequireCache() {
// purge require cache on requests for "server side HMR" this won't let
// you have in-memory objects between requests in development,
// alternatively you can set up nodemon/pm2-dev to restart the server on
// file changes, but then you'll have to reconnect to databases/etc on each
// change. We prefer the DX of this, so we've included it for you by default
for (let key in require.cache) {
if (key.startsWith(BUILD_DIR)) {
delete require.cache[key];
}
}
}in my live/prod env it is so slow that the server (google cloud run) responded with 503. in my dev env I wait for an image like 10 seconds
No response
see bug description
No response
Chrome 100
No response
When the api on AWS Cloudfront is being hit with the query it getting 400 status because of the [] in the url query string, see attached image below:
No response
Should be able to parse the query string and return the adjusted image.
No response
No response
sharp uses libwebp to decode WebP images and versions prior to the latest 0.32.6 are vulnerable to the high severity GHSA-j7hp-h8jx-5ppr.
Almost anyone processing untrusted input with versions of sharp prior to 0.32.6.
Please upgrade sharp to the latest 0.32.6, which provides libwebp 1.3.2.
No response
No response
All
No response
If no background is specified in loader options while using the CloudFlare Images loader, the service will error because of a syntax error.
No response
Load an image with default loader options and using <Image loader={cloudflareImagesLoader}>. Render the page. Expect the image not to render; CloudFlare Image Resizing responds with error message similar to:
It should show the image, I suppose
No response
I'm using OS X on a M1 Mac Mini in Arc browser (Chromium-based), but I suspect this'll happen regardless of environment
I'm pretty sure the issue is targeted to how the rgba() values are being calculated -- specifically the .toFixed(2), which transforms zero like Number(0).toFixed(2) => "0.00". I wonder if tooling is available to help calculate these values, but I'm not sure. Leaving this bug report so the issue is noted -- I will try to find a fix if I can
Hi, I followed the instruction at https://remix-image.mcfarl.in/docs/intro and created two files as exactly the same as the examples, app/routes/api/image.js and app/routes/img.tsx
// app/routes/api/image.js
import type { LoaderFunction } from "@remix-run/server-runtime";
import { imageLoader, DiskCache } from "remix-image/server";
const config = {
selfUrl: "http://localhost:3000",
cache: new DiskCache(),
};
export const loader: LoaderFunction = ({ request }) => {
return imageLoader(config, request);
};
// app/routes/img.tsx
import type { MetaFunction, LinksFunction } from "@remix-run/node";
export let meta: MetaFunction = () => {
return {
title: "About Remix"
};
};
import {Image} from 'remix-image'
export default function Index() {
return (
<Image
src="https://i.imgur.com/5cQnAQC.png"
responsive={[
{
size: { width: 100, height: 100 },
maxWidth: 500,
},
{
size: { width: 600, height: 600 },
},
]}
dprVariants={[1, 3]}
/>
);
}
Here's the package.json
{
"private": true,
"sideEffects": false,
"scripts": {
"build": "remix build",
"dev": "remix dev"
},
"dependencies": {
"@next-boost/hybrid-disk-cache": "^0.3.0",
"@remix-run/node": "^1.7.2",
"@remix-run/react": "^1.7.2",
"@remix-run/vercel": "^1.7.2",
"@vercel/node": "^2.4.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"remix-image": "^1.3.3"
},
"devDependencies": {
"@remix-run/dev": "^1.7.2",
"@remix-run/eslint-config": "^1.7.2",
"@remix-run/serve": "^1.7.2",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"eslint": "^8.23.1",
"typescript": "^4.7.4"
},
"engines": {
"node": ">=14"
}
}
So it's a very basic vanilla remix app. It runs fine locally, but when deployed to Vercel, I am getting the 500 error even on the landing page (https://test-remix-image2.vercel.app). The error log shows the following
[GET] /
08:47:04:53
RequestId: a36c849a-5f08-44ee-8f44-2ec78b5d35b1 Error: Runtime exited with error: exit status 1
Runtime.ExitError
2022-10-10T12:47:00.271Z undefined ERROR Error: ENOENT: no such file or directory, mkdir 'tmp/img'
at Object.mkdirSync (node:fs:1349:3)
at Object.module.exports.makeDirSync (/var/task/node_modules/fs-extra/lib/mkdirs/make-dir.js:23:13)
at new Cache (/var/task/node_modules/@next-boost/hybrid-disk-cache/dist/index.js:58:28)
at new DiskCache (/var/task/node_modules/remix-image/build/server/index.js:1:170363)
at Object.<anonymous> (/var/task/api/index.js:94:10)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:163:29) {
errno: -2,
syscall: 'mkdir',
code: 'ENOENT',
path: 'tmp/img'
}
https://test-remix-image2.vercel.app
Open https://test-remix-image2.vercel.app and you'll see a 500 error page.
I expect the home page and the image route (/img) to function properly.
No response
Free tier Vercel service
Hi, I would like to load a bigger image on mobile and smaller on desktop. Normally I would define on img HTML tag a min-width or if needed both min and max like so:
sizes="
((min-width: 50em) and (max-width: 60em)) 50em,
((min-width: 30em) and (max-width: 50em)) 30em,
(max-width: 30em) 20em"
But the component accepts only max-width and it won't work in my case, where the bigger images should be loaded on smaller screen. Currently my code looks following (smaller images are loaded on both mobile and desktop):
responsive={[
{
size: {
width: Math.round(cover.width / 2),
height: Math.round(cover.height / 2),
},
maxWidth: 768,
},
{
size: {
width: Math.round(cover.width / 4),
height: Math.round(cover.height / 4),
},
maxWidth: 1200
},
]}Am I missing something or it can work as I expect it with the current implementation of Remix-Image?
No response
Define in responsive prop two image sizes: for mobile bigger images should be displayed and for desktop smaller ones.
I would like to defined also a min-width to display images.
No response
No response
When installing
"remix-image": "^1.3.3",
"remix-image-sharp": "^0.1.3",
"sharp": "^0.31.1",
the dependencies listed in the installed package differ for v0.1.3
└─┬ remix-image-sharp 0.1.3
└── ✕ unmet peer sharp@^0.30.7: found 0.31.1
Did something go wrong when publishing the 0.1.3 package? Would publishing a newer version help?
Thanks!
Install the dependencies in your examples/sharp directory
[email protected]" has unmet peer dependency "sharp@^0.31.0".
As a user, I would expect the installed package to match
https://github.com/Josh-McFarlin/remix-image/blob/v1.3.3/packages/remix-image-sharp/package.json
No response
macOS
2022-10-12T10:28:05.795Z
While resolving: undefined@undefined
Found: [email protected]
node_modules/sharp
sharp@"^0.31.0" from the root project
Could not resolve dependency:
peer sharp@"^0.30.7" from [email protected]
node_modules/remix-image-sharp
remix-image-sharp@"^0.1.3" from the root project
Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "sharp",
"version": "0.31.1",
"whileInstalling": {
"path": "/Users/x/remix-image-sharp-example"
},
"location": "node_modules/sharp",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "sharp",
"spec": "^0.31.0",
"from": {
"location": "/Users/x/remix-image-sharp-example"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "sharp",
"spec": "^0.31.0",
"from": {
"location": "/Users/x/remix-image-sharp-example"
}
},
"edge": {
"type": "peer",
"name": "sharp",
"spec": "^0.30.7",
"error": "INVALID",
"from": {
"name": "remix-image-sharp",
"version": "0.1.3",
"whileInstalling": {
"path": "/Users/x/remix-image-sharp-example"
},
"location": "node_modules/remix-image-sharp",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "remix-image-sharp",
"spec": "^0.1.3",
"from": {
"location": "/Users/x/remix-image-sharp-example"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}
Tried following the tutorial and examples to integrate remix-image in my new remix app. Unfortunately every time I attempt to use the image component it corrupts my image like so:
https://gist.github.com/DAlperin/8121ec179a4410b79defbc3722f1e52e
Run linked code.
As a user I expect my image to be corrupted but it is corrupted
No response
I've tried running the example app locally with my image which worked, so I know the image is ok. I feel like there must be some conflict or mistake with the way I have things set up?
Instantiating the MemoryCache (lru-cache) in the loader config takes more than 40 seconds on my fast desktop. I also can't publish with wrangler publish as I am getting a script timeout due to the same reason. When I remove the cache property in the config object, everything works just fine. What could be the reason and how do I take advantage of the MemoryCache without timing out?
Thanks for this awesome repo and documentation, this is an outstanding project!
routes/api/image.ts according to https://remix-image.mcfarl.in/docs/tutorial-extras/cloudflare#transformer with maxSize: 5e7No timeouts, fast startups, working wrangler publish.
When I try to load an image which is rectangular and crop it to square:
<Image
alt=""
options={{
fit: ImageFit.COVER,
}}
responsive={[
{
maxWidth: 800,
size: {
height: 800,
width: 800,
},
},
]}
src="https://images.unsplash.com/photo-1655241459367-c95abd34d0bc"
/>
It does not work, the image is distorted, it is not cropped. This part in url &width=800&height=800&fit=cover does not give me anything. On the other hand it works on unsplash (&fit=crop&w=500&h=500&q=80): https://images.unsplash.com/photo-1655241459367-c95abd34d0bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80
What I do wrong? :)
No response
Try to create <Image /> with option fit: ImageFit.COVER. Inspect the image. It is not cropped.
When we use fit: ImageFit.COVER and provided size of an image is different from its own ratio - it should be cropped.
No response
When following the docs and getting setup, when I run the dev server I get:
/Users/<app>/node_modules/is-svg/index.js:41
module.exports.default = isSvg;
^
TypeError: g is not a constructor
at new DiskCache (/Users/<app>/node_modules/is-svg/index.js:41:26)
at Object.<anonymous> (/Users/<app>/app/pages/api.image.tsx:16:10)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Function.Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Server.<anonymous> (/Users/<app>/build/server.js:50:3)
at Object.onceWrapper (node:events:627:28)
No response
Just follow the installation docs
No errors when starting server
No response
No response
I try to run vercel examples when i change src to .webp format the image is corrupt
No response
Image is resized
No response
No response
After update to [email protected] I get the following error:
I think that is because of this update that have been published https://github.com/Josh-McFarlin/remix-image/releases/tag/v0.3.13
No response
remix-imageShow the image and don't trigger the error
No response
No response
I tried installing the package but got the below error
PS D:\remix-quandk-portfolio> npm i remix-image
npm ERR! code 1
npm ERR! path D:\remix-quandk-portfolio\node_modules\better-sqlite3
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c prebuild-install || npm run build-release
npm ERR! > [email protected] build-release
npm ERR! > node-gyp rebuild --release
npm ERR! prebuild-install warn install No prebuilt binaries found (target=20.9.0 runtime=node arch=x64 libc= platform=win32)
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp info find Python using Python version 3.12.0 found at "C:\Python312\python.exe"
npm ERR! gyp info find VS using VS2019 (16.11.34301.259) found at:
npm ERR! gyp info find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools"
npm ERR! gyp info find VS run with --verbose for detailed information
npm ERR! gyp info spawn C:\Python312\python.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args 'C:\\Users\\anhch\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\gyp\\gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'msvs',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'D:\\remix-quandk-portfolio\\node_modules\\better-sqlite3\\build\\config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\\Users\\anhch\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\\Users\\anhch\\AppData\\Local\\node-gyp\\Cache\\20.9.0\\include\\node\\common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=C:\\Users\\anhch\\AppData\\Local\\node-gyp\\Cache\\20.9.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=C:\\Users\\anhch\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=C:\\\\Users\\\\anhch\\\\AppData\\\\Local\\\\node-gyp\\\\Cache\\\\20.9.0\\\\<(target_arch)\\\\node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=D:\\remix-quandk-portfolio\\node_modules\\better-sqlite3',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'D:\\remix-quandk-portfolio\\node_modules\\better-sqlite3\\build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! Traceback (most recent call last):
npm ERR! File "C:\Users\anhch\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\gyp\gyp_main.py", line 42, in <module>
npm ERR! import gyp # noqa: E402
npm ERR! ^^^^^^^^^^
npm ERR! File "C:\Users\anhch\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 9, in <module>
npm ERR! import gyp.input
npm ERR! File "C:\Users\anhch\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\input.py", line 19, in <module>
npm ERR! from distutils.version import StrictVersion
npm ERR! ModuleNotFoundError: No module named 'distutils'
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onCpExit (C:\Users\anhch\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:325:16)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:514:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\anhch\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--release"
npm ERR! gyp ERR! cwd D:\remix-quandk-portfolio\node_modules\better-sqlite3
npm ERR! gyp ERR! node -v v20.9.0
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\anhch\AppData\Local\npm-cache\_logs\2023-11-22T02_03_44_158Z-debug-0.log
No response
N/A
Package installed successfully
No response
Windows 11
Node 20.9.0
Remix 2.3.0
No response
I have a site based on https://remix.run/docs/en/v1/tutorials/blog. After installing remix-image and creating a loader, I got this error in the terminal:
> node_modules/remix-image/build/server.js:1:82: error: Could not resolve "@next-boost/hybrid-disk-cache" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
1 │ ...0});var t=require("@next-boost/hybrid-disk-cache"),e=require("fs")...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Build failed with 1 error:
node_modules/remix-image/build/server.js:1:82: error: Could not resolve "@next-boost/hybrid-disk-cache" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
On an earlier version of remix-image I got the error in the browser:
Error: Cannot find module 'hybrid-disk-cache'
Require stack:
- /Users/oliver/projects/oliverschmidt-remix/node_modules/remix-image/build/server.js
- /Users/oliver/projects/oliverschmidt-remix/netlify/functions/server/build/index.js
- /Users/oliver/projects/oliverschmidt-remix/netlify/functions/server/index.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/node_modules/lambda-local/build/lambdalocal.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/runtimes/js/index.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/runtimes/index.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/registry.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/server.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/dev/dev.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/dev/index.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/main.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/index.js
- /Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/bin/run
uire stack:
Users/oliver/projects/oliverschmidt-remix/node_modules/remix-image/build/server.js
Users/oliver/projects/oliverschmidt-remix/netlify/functions/server/build/index.js
Users/oliver/projects/oliverschmidt-remix/netlify/functions/server/index.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/node_modules/lambda-local/build/lambdalocal.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/runtimes/js/index.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/runtimes/index.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/registry.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/lib/functions/server.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/dev/dev.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/dev/index.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/main.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/src/commands/index.js
Users/oliver/.nodenv/versions/14.18.1/lib/node_modules/netlify-cli/bin/run
Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
Function.Module._load (internal/modules/cjs/loader.js:746:27)
Module.require (internal/modules/cjs/loader.js:974:19)
require (internal/modules/cjs/helpers.js:93:18)
Object.<anonymous> (/Users/oliver/projects/oliverschmidt-remix/node_modules/remix-image/build/server.js:1:75)
Module._compile (internal/modules/cjs/loader.js:1085:14)
Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
Module.load (internal/modules/cjs/loader.js:950:32)
Function.Module._load (internal/modules/cjs/loader.js:790:12)
Module.require (internal/modules/cjs/loader.js:974:19)
No idea why this fails on the server as @next-boost/hybrid-disk-cache supports CJS afaict. Maybe it is related to the Netlify setup?
No response
I just followed the steps from your basic tutorial.
The image component should work.
No response
No response
We get incorrect srcset in HTML. It does not have retina width images.
No response
When we create an Image as below:
<Image
alt=""
responsive={[
{
maxWidth: 768,
size: { width: 420 },
},
{
size: { width: 800 },
},
]}
src="zzz.jpg"
/>
We get in HTML source:
<img
alt=""
src="/api/image?src=zzz&width=800"
srcset="
/api/image?src=zzz&width=420 420w,
/api/image?src=zzz&width=800 800w
"
sizes="(max-width: 768px) 420px, 800px"
/>
We have here 420-px-width and 800-px-width image inside srcset. Alright, but what about retina screens? :)
We should generate 2x size images in srcset out of the box, so the output should be:
<img
alt=""
src="/api/image?src=zzz&width=800"
srcset="
/api/image?src=zzz&width=420 420w,
/api/image?src=zzz&width=800 800w,
/api/image?src=zzz&width=840 840w,
/api/image?src=zzz&width=1600 1600w
"
sizes="(max-width: 768px) 420px, 800px"
/>
No response
No response
The given WASM for cloudflare example could not be deployed.
No response
Clone the example /cloudflare-workers and do npm run deploy
It should deploy successfully.
No response
both minWidth and maxWidth are things you can define on a responsive image, it seems there's only currently support for maxWidth in the responsive prop
No response
As a user I'd expect to be able to set both minWidth and maxWidth properties
No response
No response
context.ASSETS.fetch is undefined at runtimeUsing the cloudflare-pages example I am running into issues with the context.ASSETS.fetch(...) fetcher not being defined.
[1] TypeError: Cannot read properties of undefined (reading 'fetch')
[1] at resolver (0nqn6wg3bh8j.js:29754:48)
[1] at exports.imageLoader (0nqn6wg3bh8j.js:21486:26)
[1] at async callRouteLoaderRR (0nqn6wg3bh8j.js:3342:16)
[1] at async callLoaderOrAction (0nqn6wg3bh8j.js:2447:16)
[1] at async Promise.all (index 0)
[1] at async loadRouteData (0nqn6wg3bh8j.js:2181:19)
[1] at async queryImpl (0nqn6wg3bh8j.js:2061:20)
[1] at async Object.queryRoute (0nqn6wg3bh8j.js:2042:18)
[1] at async handleResourceRequestRR (0nqn6wg3bh8j.js:3547:20)
[1] at async 0nqn6wg3bh8j.js:3612:92 {
[1] stack: TypeError: Cannot read properties of undefined (re....js:3547:20)
[1] at async 0nqn6wg3bh8j.js:3612:92,
[1] message: Cannot read properties of undefined (reading 'fetch')I think I have narrowed it down to entry.server.tsx having both remixContext & loadContext,
remixContext: EntryContext,
loadContext: AppLoadContext,where only remixContext is passed into <RemixServer ... /> and appears that loadContext has the fetcher and it not used in this iteration of remix + cloudfare-pages.
I think I've searched as deep as I can on this issue, and it appears that either remix and/or @remix-run/cloudflare projects have made changes to context that the documentation/examples in the remix-image repo might not be up-to-date with.
https://github.com/jamespsterling/jamespsterling-remix/tree/remix-image/app
This is a runtime issue with the context, check the repo link for the code.
The fetcher should be available at runtime, wondering if I need to combine both contexts to be able to use them in the image loader.
Here is the entry.server.tsx,
https://github.com/jamespsterling/jamespsterling-remix/blob/remix-image/app/entry.server.tsx#L17
Here is the image loader,
https://github.com/jamespsterling/jamespsterling-remix/blob/remix-image/app/routes/_public.api.image._index.tsx#L16
"dependencies": {
"@cloudflare/kv-asset-handler": "^0.2.0",
"@fontsource/open-sans": "^5.0.8",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@remix-run/cloudflare": "^1.19.0",
"@remix-run/cloudflare-pages": "^1.19.0",
"@remix-run/css-bundle": "^1.19.0",
"@remix-run/react": "^1.19.0",
"bootstrap": "^5.3.1",
"clsx": "^2.0.0",
"isbot": "^3.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-svg": "^16.1.18",
"remix-image": "^1.4.0",
"tw-elements": "^1.0.0-beta3"
},
"devDependencies": {
"@cloudflare/workers-types": "^3.19.0",
"@remix-run/dev": "^1.19.0",
"@remix-run/eslint-config": "^1.19.0",
"@svgr/cli": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0",
"@svgr/plugin-prettier": "^8.1.0",
"@svgr/plugin-svgo": "^8.1.0",
"@types/react": "^18.0.35",
"@types/react-dom": "^18.0.11",
"autoprefixer": "^10.4.15",
"concurrently": "^8.2.0",
"cssnano": "^6.0.1",
"eslint": "^8.38.0",
"npm-run-all": "^4.1.5",
"npm-watch": "^0.11.0",
"postcss": "^8.4.28",
"postcss-import": "^15.1.0",
"prettier": "^3.0.2",
"prettier-plugin-tailwindcss": "^0.5.3",
"sass": "^1.63.6",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.4",
"wrangler": "^3.6.0"
},Here are some threads around the changes to loadContext: AppLoadContext,
remix-run/remix#5836
remix-run/remix#2045
remix-run/remix#5314
Thread on changes to static context.ASSETS,
cloudflare/workers-sdk#1162
Using React 18 Streaming w/ Remix,
https://remix.run/docs/en/main/guides/streaming#enable-react-18-streaming
given this example: https://github.com/Josh-McFarlin/remix-image/blob/master/examples/basic/app/routes/index.tsx#L25-L38
I'd expect the width/height of the image to change depending on if the breakpoint was met, currently it only sets the size of the image to the image size that contains the maxWidth property. tbh all of the editing of CSS styles would be a non-issue if something like the picture element existed. imo adding these additional styles seems like more work than what I would expect this component to do.
No response
I think setting width/height properties in this component seems a little overblown in terms of an expectation of what it should be doing for me, I would expect to define my own width/height classes in my own code.
No response
No response
Hi, I'm having trouble installing the library on my ARM-based Mac with NodeJS v19. I'm getting this error, which is fixed by the new major version of better-sqlite3.
No response
Run npm install remix-image on any project.
Installing the library should not crash.
No response
No response
It looks like in the entire codebase cache.status is not being called, when is this method invoked? it seems like the loader should be hitting it to determine when something is stale, thoughts? @Josh-McFarlin
No response
N/A
not sure yet, but I suspect that the status method should be called.
No response
No response
I've tried to display .webp images instead of jpeg to reduce file size but I can't.
Tried
defaultOptions
set default parameter contentType: outputContentType = MimeType.WEBP in sharpTransformer
move .webp() resize to right after image.resize, before .jpeg()
nothing works.
set options={{contentType: MimeType.WEBP}} does add &contentType=image/webp to the URL
But the responses are all image/jpeg
No response
Describe above
Response image/webp
No response
No response
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.