Comments (6)
Hi @d1urno,
I've been working on a similar module and I'm still trying to figure out the best regex for this use case, since the one I'm using is still finding false positives in the minified javascript chunks. I've put it up here if you want to take a look!
from nuxt-image-extractor.
@TotomInc using double quote syntax like url("https://url/to/my-image.png")
should work for now.
@emiliobondioli nuxt-magpie is looking good, thanks for your contributions!
from nuxt-image-extractor.
Thanks for reporting! I'll look into it soon :)
from nuxt-image-extractor.
It will be dificult for me to find the regex needed to support url sources, those are more complex than the regular src=""
pattern. There may not be double quotes on file names so in this case the regex was easier. But that is different with url() pattern, since there may be ()
parenthesis on file names and we need to diferentiate those from the actual code enclosing.
For a start I can think of the need to find a regex against the following kind of samples (regex101 here):
url(https://my-api.com:1337/my-image.png.png)
url('https://my-api.com:1337/my-image.png.png')
url("https://my-api.com:1337/my-image.png.png")
url(https://my-api.com:1337/my-image.png.png?itok=de78r5)
url('https://my-api.com:1337/my-image.png.png?itok=de78r5')
url("https://my-api.com:1337/my-image.png.png?itok=de78r5")
url(https://my-api.com:1337/(myimage)(nice).png.png)
url('https://my-api.com:1337/(myimage)(nice).png.png')
url("https://my-api.com:1337/(myimage)(nice).png.png")
url(https://my-api.com:1337/(myimage)(nice).png.png?itok=de78r5)
url('https://my-api.com:1337/(myimage)(nice).png.png?itok=de78r5')
url("https://my-api.com:1337/(myimage)(nice).png.png?itok=de78r5")
That regex should grab the exact image link leaving out everything else. Just as GitHub did when I pasted the previous list 😆. May be @emiliobondioli could help us finding it.
from nuxt-image-extractor.
Hi! First I want to say that this is a great module and has been working well for me so far!
Recently I used a style binding on an element and I'm running into the issue as mentioned above - extra ')' at the end of the image file. Since I'm still quite new to vue/nuxt I was wondering that maybe there is a better way to tackle this issue using different binding or logic in vue?
from nuxt-image-extractor.
@case112
Thank you! I believe you could try to add double quoutes "" to that import as well, like this url("${banner_data.image_url}")
. If that doesn't work you could try to write that style binding as a computed property and then load it to the element.
computed: {
getStyle() {
return {
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.15), url("${this.banner_data.image_url}")`
}
}
}
<div class="hero-image" :style="getStyle">
from nuxt-image-extractor.
Related Issues (11)
- not working for urls without extensions HOT 1
- still fetches from given urls HOT 1
- Substract certain file naming option
- Multiple BaseUrls
- Doesn't work
- Cannot require image in the generate process HOT 2
- "page.html.matchAll is not a function" error on generate HOT 4
- Add support for non-default router base values HOT 1
- TypeError: page.html.matchAll is not a function HOT 1
- Download images Contentful HOT 3
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.
from nuxt-image-extractor.