Suggestion and error about express-imgwiz HOT 39 CLOSED

Reading this thread brought a smile to my face:D Well done to both of you for good and friendly comms :)

from express-imgwiz.

@woutercouvaras Thank you.

I'm glad that @TheAndroidGuy was supportive with his feedback. I hope he's doing great 😜

from express-imgwiz.

Hey @TheAndroidGuy, I'm glad this library can help you.

The background option is reasonable and posible to implement.
Also, I'll look into the .svg error very soon

from express-imgwiz.

I have fixed the .svg error, it will download the .svg and served as it is.

The background option is also available. Examples:

• background=blue => for color name
• background=#ffffff => for hex code
• background=(139,195,74,0.4) => for rgba code

Please update to the latest version (0.0.8) to apply changes!

from express-imgwiz.

@hieunc229 That was fast 👍
I updated to the latest version, but the .svg problem still persists:
It shows the following message and it downloads the .svg file instead displaying it.

from express-imgwiz.

Thanks for the info @TheAndroidGuy.

Turn out the issue was the content type which should be image/svg+xml, instead of image/svg (don't know why it happened with local file only). I have updated the code, tested on the svg you gave and refreshed a few times. It works fine now.

Can you try the latest version 0.0.9? Please let me know if any other error occur (also mind the cache in case it still download the file)

from express-imgwiz.

Oops, I didn't check serving svg from static directory. I updated the code and pushed to npm (version 0.1.0)

That's true, svg is not going to be formated, queries will be ignore. There is only one reason for using svg with this library is caching (to avoid original url being changed). Otherwise, there is no point for using svg though this library :)

Hopefully the problem is solved now. Let me know if there is still issue!

from express-imgwiz.

@hieunc229 Now it works 👍
I just had to clear the browser cache because it didn't work properly for the files that i have accessed prior the update.

I have one last suggestion for beginners who might have problems using the library with vanilla js. Maybe you should mention the alternative syntax for require-ing the module.

Also you could add few more keywords for better results when someone searches, like: thumbnail, express thumbnails etc...

from express-imgwiz.

@TheAndroidGuy For some image hosting, the file extension doesn't included in the url. And it is important to have the extension, so I added for those images. I could remove the duplicate, though the file should definetely be if the cache is enabled.

Besides, thanks for the suggestion about importing with vanila js and the keywords. I'll made an update

from express-imgwiz.

I have just pushed to a new version, with reduce a bit of codes, update naming of the cache files and update readme. It seems like going from v0.0.8 to v0.1.2 within 2 days 😅

from express-imgwiz.

@hieunc229 You know whats best, you have vision of all the use cases and reasoning behind every step you implemented, it just caught my eye and i wanted to mention it.

from express-imgwiz.

Hey @TheAndroidGuy, I have pushed the version v0.1.3. It should return 404 error and a not found message.

You can also set the EXPRESS_WIZ_404_IMAGE enviroment vairable to set a path to the placeholder image (display when the image doesn't exists). Note that the path is relative to your app root directory

from express-imgwiz.

@hieunc229 I am using the latest version 0.1.3-1 and its regenerating every time 🤔

from express-imgwiz.

Alright, It didn't regenerate image for ones using url query, but ones in static directory. I pushed a new update 0.1.3-2. It should be fixed!

from express-imgwiz.

Alright, I made another update (v0.1.4-1) which will not regenerate cache for static image without transform query. It will look and serve directly from static directory.

Besides, I have been test the library manually, since it doesn't take much time. Up to this point, I think it need tests. I'll find sometimes to write those tests soon

Thanks and let me know if there is any other issue

from express-imgwiz.

Okie, I've pushed a new update (v0.1.4-2) to fix the issue. Thanks and let me know if there is any other issue!

from express-imgwiz.

Did you clear the cache from both cach directory and the browser, then try open the image?

By the way, why do you need to update new content without changing the name? Can you change to the new name?

Once again, updating image without a new name is not recommend caching practice. Since most of the time, users won't clear their cache

from express-imgwiz.

That sounds great. Hope you all the best :)

from express-imgwiz.

@hieunc229 Thank you, i wish you also good health and success 😄

from express-imgwiz.

I am doing great, thank you. I hope everything is fine for you as well :)

from express-imgwiz.

Good to hear that @TheAndroidGuy!

from express-imgwiz.

Alright, can you post the .svg link or upload it somewhere? (I can try and debug if posible) Also, what browser are you using?

It works fine on my side (tested on Chrome, Safari, Firefox)

from express-imgwiz.

@hieunc229 Here is example file located in `images/flags/en.svg:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  <rect y="85.333" style="fill:#F0F0F0;" width="512" height="341.337"/>
  <polygon style="fill:#D80027;" points="288,85.33 224,85.33 224,223.996 0,223.996 0,287.996 224,287.996 224,426.662 288,426.662   288,287.996 512,287.996 512,223.996 288,223.996 "/>
</svg>

The generated file inside cache folder is: flags-en.svg but the content of the file contains text data, which is the location of the file: C:\Users\xxxxx\Desktop\appname\images/flags/en.svg, it doesn't contain the actual XML data. Also notice the difference of / in the path.
Also the url i am using for getting the file does not contain any image manipulation queries, just simple access to the file.

EDIT: I am using Windows x64, Chrome, also tried Firefox, Edge and its the same.

from express-imgwiz.

@hieunc229 For some reason it still doesn't work on my end (same situation as the previous).
Should i mention that i am using the library as middleware the following way:

const express_imgwiz = require("express-imgwiz")

app.use("/images", express_imgwiz.imgWizMiddleWare({
  staticDir: path.join(__dirname, "images"),
  cacheDir: path.join(__dirname, "cache")
}))

By the way, why is there reason to manipulate vector format? (since it is xml instructions, size doesn't matter) 🤔

from express-imgwiz.

@hieunc229 I noticed that there is double file extension like image.jpg.jpg in the cache folder, is that expected?

from express-imgwiz.

When i try to access image that doesn't exist i get this error:

(node:17396) UnhandledPromiseRejectionWarning: Error: Input file is missing
(node:17396) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:17396) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

from express-imgwiz.

Ok, I haven't implement 404 error. I'll add soon, with an option for a placeholder image

from express-imgwiz.

Hey @hieunc229 I think i found out something.

I noticed that the cached files modified date was changing everytime i try to access the file, it looked like it was regenerating new file every time the file is requested.

I tried to look at which version this behaviour occured and i found out it occurs at v0.1.0: fix serving staticc svg file and above.

from express-imgwiz.

That's true, the issue caused by adding the extension to the cache file. Though it's been fixed after v0.1.1

from express-imgwiz.

@hieunc229 Just checked, works perfectly fine now 👍

from express-imgwiz.

Hey @hieunc229, now i noticed it regenerates the files every time for the files inside sub-directories.
For example /images/flags.

from express-imgwiz.

This happens only for images in sub-directories which don't have any query parameters (the original image without any modification).

from express-imgwiz.

@hieunc229 Now i think that the svg files are served with wrong content-type: application/xml, instead od image/svg+xml.
When i access the svg directly in new tab it shows up fine, but when it is linked with <img src="...svg"> it's not showing.

from express-imgwiz.

@hieunc229 What happens if the original image is updated?
I tried updating the original image and the cache didn't update. I also deleted everything from cache and it still generates the cache from the previous image, how it does that?
The previous image is deleted, how is it possible to generate the cache from the deleted image?

from express-imgwiz.

I guess the image come from the browser cache. You can disable browser cache by setting EXPRESS_WIZ_CACHE_AGE to 0. But user will need download every time the page is loaded.

You can still clear the browser cache to fetch the new image. But in most cases, user won't clear their browser cache. For best caching practice, you should treat it as a new image.

from express-imgwiz.

@hieunc229 I cleared the cache, and i tried with new browser, it still shows the previous image 🤔

from express-imgwiz.

@hieunc229 Yes, i have cleared both the cache folder and the browser cache and it still showed the previous image. Now I did both plus I killed the server and started again, maybe it has something to do with nodemon.
I could change the name if i have to, but i was preferring to have the same name.
Thanks for your explanation, i will think about how often the images would change and if I should update the image name too.

from express-imgwiz.

No worries! If you don't mind, I'd love to see what you are working on :)

from express-imgwiz.

@hieunc229 I am working on inventory/invoicing app tailor made for a very close person of mine (Vue.js SPA + Express.js + MySQL).
I am using this library to generate thumbnails of smaller dimensions for use in product selection autocomplete, product images in the order PDF and similar.
If it turns out successfull i could make it public to the world 😋

from express-imgwiz.