Comments (6)
@ubnt-marc-khouri I have to check if everything works fine with the new recent version of css-loader and noquotes=true
option.
If everything will be fine, I'd like to drop noquotes
option, however I also don't want to break someone's code with the new version.
My very preliminary thoughts (after Friday 🍺) are to publish a new version which will log a warning if noquotes
option is used. After some time publish a major version where noquotes
will be removed.
Not sure if I'll have a time for open-source this days, but I'll work on that at some point during next week.
from svg-url-loader.
Apparently, this seems not to work, cause somehow something swallows surrounding quotes of single valued attributes, such for example src
attribute for <img>
tags.
See this project sample at commit 2b81598, what has html-loader and svg-url-loader.
If you inspect the template index.html
, you'll see an <img>
tag like:
<img id="logo" src="../assets/img/spinner.svg" alt="Loading">
After building, the output index.html
has this <img>
tag with an unquoted inline svg value at its src
attribute, like this:
<img id=logo src=data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='
Some may say this is a bug from svg-url-loader, but the ugly truth is that you may disable svg-url-loader and the quotes still disappear.
from svg-url-loader.
I see your point.
Have you tried to use noquotes option? Will it fix your issue?
from svg-url-loader.
Hi :-)
Yeah noquotes
fixes the issue, however it feels like it shouldn't be something that consumers have to know/use to result in valid markup.
I've dug into this some more, and I think the real issue here is that svg-url-loader
should never wrap in quotes, and the only reason it has to for the CSS url()
use-case is that css-loader
is incorrectly stripping quotes for these style of data URIs.
As such I've filed webpack-contrib/css-loader#615, and hopefully once that's fixed, svg-url-loader
can stop adding quotes entirely and the noquotes
option/complexity can just be removed :-)
from svg-url-loader.
Hi @bhovhannes, I believe the issue is fixed in css-loader
(webpack-contrib/css-loader#627), so modules such as this one don't need to be wrapping their data urls in quotes. Would you consider dropping the noquotes
option, or defaulting it to true
instead?
Thank you for your work on the plugin!
from svg-url-loader.
Apparently, this seems not to work, cause somehow something swallows surrounding quotes of single valued attributes, such for example
src
attribute for<img>
tags.See this project sample at commit 2b81598, what has html-loader and svg-url-loader.
If you inspect the template
index.html
, you'll see an<img>
tag like:<img id="logo" src="../assets/img/spinner.svg" alt="Loading">
After building, the output
index.html
has this<img>
tag with an unquoted inline svg value at itssrc
attribute, like this:<img id=logo src=data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='
Some may say this is a bug from svg-url-loader, but the ugly truth is that you may disable svg-url-loader and the quotes still disappear.
As a possible workaround, setting removeAttributeQuotes
to false
in the minimize
options object, may work.
from svg-url-loader.
Related Issues (20)
- How to use this in html? HOT 2
- Images svg aren't loading, how to fix? HOT 2
- Incorrectly escapes # in style-element HOT 3
- Question: is there a way to disable plugin inline for few SVG? HOT 1
- Update README to include webpack options configuration for supported parameters HOT 2
- problem with `file-loader` and deps HOT 15
- The benefits of data:xyz style vs. SVG sprites HOT 1
- [Proposal] Add option to skip some phrase during encoding HOT 1
- Issues to find SVGs inside imported sass files. HOT 1
- Please update `file-loader` to latest version HOT 14
- Incorrect Data URI content when using issuer test HOT 2
- Doesn't working on image tag HOT 2
- Missing webpack in peerDependencies for yarn@2 compatibility HOT 1
- Please Add CHANGELOG.md HOT 1
- Action Required: Fix Renovate Configuration
- [Webpack]Error report of introducing SVG file into img tag ? Please refer to the screenshot. HOT 13
- "module export" instead of svg directly HOT 6
- Dependency Dashboard
- Malformed svg produced HOT 3
- Svg is abstracted from css file. 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 svg-url-loader.