brokenmass / advanced-image-loader Goto Github PK
View Code? Open in Web Editor NEWAdvanced webpack2 image loader with support for image resizing, srcset and inlined placeholder. And it's blazing fast
advanced-image-loader's People
Contributors
Stargazers
Watchers
advanced-image-loader's Issues
How about inline html?
I'm confused with these packages. Each seem to need some kind of javascript import and I don't get why... So if we have about 30 static images I'll need to import this 30 times? And why also import in Javascript?
Is there a way for webpack to generate these images from existing html picture tags? Like:
<picture>
<source srcset="{{ asset('img/pages/home/header01.jpg?sizes=575w&placeholder=true') }}" media="max-width: 575px">
<source srcset="{{ asset('img/pages/home/header01.jpg?sizes=768w&placeholder=true') }}" media="max-width: 768px">
<source srcset="{{ asset('img/pages/home/header01.jpg?sizes=991w&placeholder=true') }}" media="max-width: 991px">
<source srcset="{{ asset('img/pages/home/header01.jpg?sizes=1199w&placeholder=true') }}" media="max-width: 1199px">
<img srcset="{{ asset('img/pages/home/header01.jpg') }}" alt="My default image">
</picture>
How to use "context query parameter or option"
I might be messing up or something might be broken. I'm not sure.
The readme documentation is already great, thank you, but I could use some advice on context query/option if you have time. Please and thank you.
From the readme:
"[path] the path of the resource relative to the context query parameter or option."
I'd like to use the [path] option. At the moment it's giving me the path from my hard drive root.
I've tried to add a context option but I haven't seen any changes yet.
I've tried adding to the loader:
loader: 'advanced-image-loader?context=./src'
Also, tried to add context in the options:
options: {
width: 1280,
srcset: [320, 640, 960, 1280, 1920],
quality: 90,
placeholder: 32,
context: './src',
name: '[path][name]-[width]',
}
…but I still get the hard drive root 😞. I'd greatly appreciate any suggestions?
Thanks for your work on the loader.
…and thanks for reading.
More information on my use case:
I am using this advanced-image-loader with the pug templating engine and pug-html-loader to output a static site. advanced-image-loader seems to resize the images and replace the image srcs perfectly 🌟.
I'm constructing the srcset by hand because I don't think or expect I can get this loader to write the srcset whilst I'm using pug.
🤔 In the future I think I would drop pug and try to use JS or a JS library (Vue/React/etc…) for templating, I think this would make my life with webpack easier. I'm still fairly new to webpack so I haven't quite yet managed to let go of my HTML first mentality.
Warning: "'Call' is deprecated" when building with Node 10
There are several warnings about deprecated methods when you attempt to install this loader in a Node 10 environment.
Full output:
> node-gyp rebuild
TOUCH Release/obj.target/libvips-cpp.stamp
CXX(target) Release/obj.target/sharp/src/common.o
CXX(target) Release/obj.target/sharp/src/metadata.o
../src/metadata.cc:136:15: warning: 'Call' is deprecated [-Wdeprecated-declarations]
callback->Call(2, argv);
^
../../nan/nan.h:1617:3: note: 'Call' has been explicitly marked deprecated here
NAN_DEPRECATED inline v8::Local<v8::Value>
^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
^
1 warning generated.
CXX(target) Release/obj.target/sharp/src/operations.o
CXX(target) Release/obj.target/sharp/src/pipeline.o
../src/pipeline.cc:976:8: warning: lambda capture 'this' is not used [-Wunused-lambda-capture]
[this](sharp::InputDescriptor *joinChannelIn) {
^
../src/pipeline.cc:984:20: warning: 'Call' is deprecated [-Wdeprecated-declarations]
queueListener->Call(1, queueLength);
^
../../nan/nan.h:1617:3: note: 'Call' has been explicitly marked deprecated here
NAN_DEPRECATED inline v8::Local<v8::Value>
^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
^
../src/pipeline.cc:988:15: warning: 'Call' is deprecated [-Wdeprecated-declarations]
callback->Call(3, argv);
^
../../nan/nan.h:1617:3: note: 'Call' has been explicitly marked deprecated here
NAN_DEPRECATED inline v8::Local<v8::Value>
^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
^
../src/pipeline.cc:1250:18: warning: 'Call' is deprecated [-Wdeprecated-declarations]
queueListener->Call(1, queueLength);
^
../../nan/nan.h:1617:3: note: 'Call' has been explicitly marked deprecated here
NAN_DEPRECATED inline v8::Local<v8::Value>
^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
^
4 warnings generated.
CXX(target) Release/obj.target/sharp/src/sharp.o
CXX(target) Release/obj.target/sharp/src/utilities.o
SOLINK_MODULE(target) Release/sharp.node
TOUCH Release/obj.target/win_copy_dlls.stamp
Everything still appears to work just fine, but Node 10 might be the last supported version until an update arrives.
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.