strapi-community / strapi-plugin-local-image-sharp Goto Github PK

View Code? Open in Web Editor NEW

63.0 3.0 16.0 921 KB

Dynamically resize, format and optimize images based on url modifiers.

Home Page: https://strapi-community.github.io/strapi-plugin-local-image-sharp/

JavaScript 100.00%

strapi ipx sharp

strapi-plugin-local-image-sharp's Introduction

Local Image Sharp

Dynamically resize, format and optimize images based on url modifiers.

✨ Features
🖐 Installation
🚚 Usage
Contributing
License

✨ Features

Convert any uploaded images with local provider using sharp modifier. No extra configuration needed, the modifiers will be applied based on the url.

This is made by ipx

🚚 Getting Started

Read the Docs to Learn More.

Contributing

I/We are actively looking for contributors, maintainers, and others to help shape this package. As this plugins sole purpose within the Strapi community is to be used by other developers and plugin maintainers to get fast responses time.

If interested please feel free to email the lead maintainer Sacha at: [email protected] or ping stf#3254 on Discord.

License

See the LICENSE file for licensing information.

strapi-plugin-local-image-sharp's People

Contributors

Stargazers

Watchers

Forkers

neharkarvishal joshmeads zitscher sijokun keystonescience ayubm candidosales kostyaval zhinea collective-studio graphicfox ram-you waxeyestudio chris-barklem alexleach

strapi-plugin-local-image-sharp's Issues

GET parameters

Hi,

it would be great if this Plugin would also support GET parameters instead of directory names, so it would be compatible with next/image. The directory structure only doesn't seem to be supported by next's image optimization functionality.

Presets and Strict Mode for prevent potential image-resize attacks

I have been using this plugin, and while it provides great functionality, but I have noticed two key functions that are missing which would greatly improve the plugin's functionality.

Presets: Allowing users to apply preset rules as modifiers. This would streamline the process of applying specific sets of modifiers to images, making the plugin more efficient and user-friendly.
Strict Mode: would disable the use of arbitrary modifiers. In this mode, only presets and allowed modifiers specified in the config would be used to modify images. This would prevent potential image-resize attacks on our server, ensuring the security of our system.

I am willing to contribute to the development of these features if necessary. I believe they would be a valuable addition to the plugin.

Thank you for your consideration.

Any plans to get this working with node 20.x?

If I try I get this:

node v20.11.0
npm v10.2.4

npm WARN deprecated [email protected]: Package renamed to https://github.com/unjs/ofetch
npm ERR! code 1
npm ERR! path /opt/app/node_modules/ipx/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Detected globally-installed libvips v8.15.0
npm ERR! sharp: Building from source via node-gyp
npm ERR! 
npm ERR! make: Entering directory '/opt/app/node_modules/ipx/node_modules/sharp/build'
npm ERR!   CC(target) Release/obj.target/nothing/../node-addon-api/nothing.o
npm ERR! rm -f Release/obj.target/../node-addon-api/nothing.a Release/obj.target/../node-addon-api/nothing.a.ar-file-list; mkdir -p `dirname Release/obj.target/../node-addon-api/nothing.a`
npm ERR! ar crs Release/obj.target/../node-addon-api/nothing.a @Release/obj.target/../node-addon-api/nothing.a.ar-file-list
npm ERR!   COPY Release/nothing.a
npm ERR!   TOUCH Release/obj.target/libvips-cpp.stamp
npm ERR!   CXX(target) Release/obj.target/sharp-linuxmusl-x64/src/common.o
npm ERR!   CXX(target) Release/obj.target/sharp-linuxmusl-x64/src/metadata.o
npm ERR!   CXX(target) Release/obj.target/sharp-linuxmusl-x64/src/stats.o
npm ERR!   CXX(target) Release/obj.target/sharp-linuxmusl-x64/src/operations.o
npm ERR!   CXX(target) Release/obj.target/sharp-linuxmusl-x64/src/pipeline.o
npm ERR! make: Leaving directory '/opt/app/node_modules/ipx/node_modules/sharp/build'
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] | linux | x64
npm ERR! gyp info find Python using Python version 3.11.6 found at "/usr/bin/python3"
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/usr/local/lib/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 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/opt/app/node_modules/ipx/node_modules/sharp/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/root/.cache/node-gyp/20.11.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=/root/.cache/node-gyp/20.11.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/root/.cache/node-gyp/20.11.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/opt/app/node_modules/ipx/node_modules/sharp',
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 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! ../src/pipeline.cc: In member function 'virtual void PipelineWorker::OnOK()':
npm ERR! ../src/pipeline.cc:1229:30: error: aggregate 'PipelineWorker::OnOK()::stat64 st' has incomplete type and cannot be defined
npm ERR!  1229 |         struct STAT64_STRUCT st;
npm ERR!       |                              ^~
npm ERR! ../src/pipeline.cc:1230:55: error: invalid use of incomplete type 'struct PipelineWorker::OnOK()::stat64'
npm ERR!  1230 |         if (STAT64_FUNCTION(baton->fileOut.data(), &st) == 0) {
npm ERR!       |                                                       ^
npm ERR! ../src/pipeline.cc:44:23: note: forward declaration of 'struct PipelineWorker::OnOK()::stat64'
npm ERR!    44 | #define STAT64_STRUCT stat64
npm ERR!       |                       ^~~~~~
npm ERR! ../src/pipeline.cc:1229:16: note: in expansion of macro 'STAT64_STRUCT'
npm ERR!  1229 |         struct STAT64_STRUCT st;
npm ERR!       |                ^~~~~~~~~~~~~
npm ERR! make: *** [sharp-linuxmusl-x64.target.mk:162: Release/obj.target/sharp-linuxmusl-x64/src/pipeline.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:209:23)
npm ERR! gyp ERR! System Linux 6.5.0-21-generic
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /opt/app/node_modules/ipx/node_modules/sharp
npm ERR! gyp ERR! node -v v20.11.0
npm ERR! gyp ERR! node-gyp -v v10.0.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-02-27T17_01_58_488Z-debug-0.log

Question: can it transform the image to webp on image upload?

Hello,

I was wandering if this plugin-in could be used to turn all my uploaded images to webp on upload instead of when it's retrieved.

Thanks!

heifsave_buffer not found while running in Docker

Hello, first of all I'd like to thank all the contributors involved in this project. It is great.

I've found an issue with running the plugin in Docker container. During an attempt to transform given asset on request, the following error occurs:

debug: IPX Error (VipsOperation: class "heifsave_buffer" not found)

This happens when you build your Strapi Docker image using the following sample production Dockerfile.

For the runtime image (node:16-alpine), vips-dev is already being installed, however vips-heif is also required to make the plugin work. Then, the RUN docker statement should look like this:

FROM node:16-alpine
RUN apk add --no-cache vips-dev vips-heif

Adding this issue so it hopefully helps others facing the same problem. Can be closed right away 🙂

[BUG]: IPX error when trying to access any media

Description

After upgrading to the newest version I am no longer able to access any imagery via the its url. Following console output is shown when any file is accessed via /uploads/filename.ext

IPX Error (File not found (/Users/fabio_nettis/github/bucan-labs/application/api/public/uploads/organization/banner/ekz_hauptsitz_d1d858b79b.jpg))
IPXError: File not found (/Users/fabio_nettis/github/bucan-labs/application/api/public/uploads/organization/banner/ekz_hauptsitz_d1d858b79b.jpg)
    at createError (/Users/fabio_nettis/github/bucan-labs/application/api/node_modules/ipx/dist/shared/ipx.eadce322.cjs:76:15)
    at Object.filesystem (/Users/fabio_nettis/github/bucan-labs/application/api/node_modules/ipx/dist/shared/ipx.eadce322.cjs:94:15)
    at async ipxMiddleware (/Users/fabio_nettis/github/bucan-labs/application/api/node_modules/strapi-plugin-local-image-sharp/src/middleware.js:89:19) {
  statusMessage: 'IPX: File not found',
  statusCode: 404
}

According to this forum post following line in the plugins code is causing the above error, might be worth looking into.

const ipx = createIPX({
  dir: `${strapi.dirs?.dist?.public ?? strapi.dirs?.public}/uploads`,
})

// [Possible fix]: The variable strapi.dirs.public is undefined and I just added an ?? “public” and it works.
const ipx = createIPX({
  dir: `${strapi.dirs?.dist?.public ?? strapi.dirs?.public ?? "public"}/uploads`,
})

Steps to reproduce

Install latest version of the plugin
Upload some media to local provider
Try to access uploaded media via the created url

Expected behaviour

Obviously the media should be accessible through the url if present in the directory.

Environment

Node version: v16.18.0
Strapi version v4.5.6
Plugin version: v1.4.0

Additional context

N/A

AVIF support

Could you please add AVIF?

const allowType = ['JPEG', 'PNG', 'GIF', 'SVG', 'TIFF', 'ICO', 'DVU', 'JPG', 'WEBP'];

It doesn't work with Google Cloud Storage Provider

Hello,

My Strapi instance runs on google cloud and stores the files in GCP, the parameters doesn't seem to work. Any ideas?

THanks in advance

breaks the video

breaks the video, please add a check for the correct format (only for images), something like this:

const allowType = ['JPEG', 'PNG', 'GIF', 'SVG', 'TIFF', 'ICO', 'DVU'];

// firstSegment this is a variable from your code
if(!allowType.includes(firstSegment.split('.').pop().toUpperCase())) {
await next()
return
}

strapi v4.3.0.beta2

does not work with strapi v4.3.0.beta2
Parameter in url not recognized

Cache images?

Is there a way once requested the image is being cached forever? I don't want to regenerate the image on each call.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <img alt="image" src="http://localhost:1337/uploads/f_avif,q_70,w_920/F_Sp8o_KVIAA_0_U7b_bc59f01efd.jpg">
</body>
</html>

Missing public folder

https://forum.strapi.io/t/undefined-public-folder-while-upload/20910/2

[Performance] Cache-Control in HTTP response header

I'm using the format URL, and I noticed that the HTTP response headers aren't sending the Cache-Control attribute.

Using the strapi-plugin-local-image-sharp:

Without strapi-plugin-local-image-sharp:

Could you add a new attribute to set the maxAge of the Cache-Control in the response headers? Example: https://docs-v3.strapi.io/developer-docs/latest/development/plugins/upload.html#using-a-provider

config/plugin.js

module.exports = ({ env })=>({
  "local-image-sharp": {
    config: {
      cacheDir: ".image-cache",
      maxAge: 86400000,
    },
  }
});

It's precious for performance and metrics.

Add latest LTS support.

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=14.x.x <=18.x.x". Got "20.9.0"

1.2.1 breaks usage of path modifiers

I update to 1.2.1 and get 404 using path modifiers.
e.g. http://localhost:1337/uploads/w_200/buffalo_56442f4096.png

I tried to create a new project and get same error too.
strapi version: 4.4.3

Using query parameters modifiers(1.2.1) or 1.2.0 works fine, btw.

How to use sharpen parameter?

The example in the docs doesn't work.

When I test with only ?sharpen, I get the following error:

IPX Error (Expected number between 0.01 and 10000 for sigma but received  of type string)

I've tried with ?sharpen.sigma=100, and it works, but there's no change on the resulting image.

PS: great great plugin! Maybe one of my most long-awaited plugins for strapi (or Next.js)

Providing default plugin configuration does not work

Looks like default plugin configuration is exported as default export:

// src/config/index.js

module.exports = {

And used as const import:

// src/index.js
const { config } = require('./config');

PR #27 should resolve this issue.

Question: how would this work if I use AWS S3 provider?

Hello 👋

Is this plugin still useful if I use a provider?