-
Notifications
You must be signed in to change notification settings - Fork 253
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Transparency not detected when image url doesn't contain an extension #368
Comments
I had a similar issue where my url doesn't have a mime type extension. eg. I guess there should be a default format set in the provider or we need to pass in the format we want so the image generates using the correct mime type format. See the |
Passing |
There is an issue that is looking at adding a There is a comment that mentions using legacy format in that issue thread as well #309 (comment) |
Yes I've used the workaround from that issue somewhere else but it's not the same problem as my issue I believe. |
The code for nuxt-picture to define the legacy format uses the url and I guess that is returning null which is being calculated as not transparent. Do you have any suggestions on how the below code should handle the extension being null? getFileExtension (url: string = '') {
const extension = url.split(/[?#]/).shift()!.split('/').pop()!.split('.').pop()!
return extension
}
originalFormat(): string {
return getFileExtension(this.src)
},
isTransparent(): boolean {
return ['png', 'webp', 'gif'].includes(this.originalFormat)
},
nLegacyFormat(): string {
if (this.legacyFormat) {
return this.legacyFormat
}
const formats: Record<string, string> = {
webp: this.isTransparent ? 'png' : 'jpeg',
svg: 'png'
}
return formats[this.nFormat] || this.originalFormat
},
const formats = this.nLegacyFormat !== this.nFormat
? [this.nLegacyFormat, this.nFormat]
: [this.nFormat] |
I'm really not an expert on this kind of logic. Would it be possible to test the mime type if the url has no extension? |
@pi0 I am thinking maybe a quick solution is to default to png when no extension is found in the url? const formats: Record<string, string> = {
webp: this.isTransparent || !this.originalFormat ? 'png' : 'jpeg',
svg: 'png'
} There is also a more complicated solution of using a HEAD request to check mime type see stackoverflow for example. getImgContentType (url) {
return fetch(url, { method: 'HEAD' })
.then(response => response.headers.get('Content-type'))
} |
I can provide you one and help/test if you are still up for it? |
@vanling having a test/example/demo URL would be great for setting up a Directus image provider. |
@shadow81627 will send you some details to your mail (from gh profile) |
@vanling I have created a pull request to add Directus as an image provider. #572 (comment) |
Hello!
I'm using nuxt in full static mode with directus as a content source.
Directus has a media library which provides a path to display the files. The path is built as follows:
http://[directus-url]/assets/[FILE_ID]
ex: http://localhost:8055/assets/db6b1d10-3ab0-4c20-a088-0f0246ae3145
When using nuxt-picture with that url as
src
, it renders a transparentwebp
as expected but the fallback generated is a.jpeg
with a black background.I tested with a local path to the file
/assets/image.png
and a distant path containing the.png
extension and all is working fine.Is it an expected behaviour?
Thanks!
nuxt v2.15.7
nuxt-img v0.5.0
The text was updated successfully, but these errors were encountered: