Comments (9)
Hello, @michael-ciniawsky!
I tested my code now without using my custom modification for url loader, and it seems to work. So I'm changing back to it. Thanks for reaching me! Feel free to close this issue.
from url-loader.
I met the same issue just now.
The problem was solved when I add /\.svg$/
to the exclude
prop of the rule using file-loader
.
That shows the issue would appear when a file type was processed by file-loader
and url-loader
at the same time.
from url-loader.
I'm having this same issue.
@andresmrm were you able to resolve it?
from url-loader.
To provide some more context.
With this loader config
{ test: /\.svg/, loader: `url?mimetype=image/svg+xml&name=[name]-[hash].[ext]` }
import logo from './logo.svg';
produces the file logo-33f58a0735f17635fc36f58023b72dcb.svg
during the build, which is correct. However, <img src={logo}/>
becomes
<img src="data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJsb2dvLTMzZjU4YTA3MzVmMTc2MzVmYzM2ZjU4MDIzYjcyZGNiLnN2ZyI=" data-reactid=".v103i58mbk.1.0.0.0">
That data URI turns out to be this
module.exports = __webpack_public_path__ + "logo-33f58a0735f17635fc36f58023b72dcb.svg"
Which of course, isn't a valid SVG file. I'm not sure why. :/
from url-loader.
Hi, @defrex ! I changed the loader code to this. And then I use it like this:
const assets = {
logo: require('url?once=1!../assets/logo.svg'),
...
}
And then, set my img
src
to assets.logo
It's an ugly hack, but seems to work here...
from url-loader.
That worked for me as well.
Though, it lead me to look more into why the asset was being loaded twice. Looks like it was matching my SVG loader and my normal image loader. Once I fixed the regex for the image loader the problem went away and I was able to remove the patch.
Perhaps your issue is similar?
from url-loader.
I'm glad it was helpfull for you. =)
But it seems not to be my case, since I'm not loading the images in the webpack loader, only in a JS file.
from url-loader.
@andresmrm Still got this regression, I would like to hear more about this if possible 😛
from url-loader.
@andresmrm If you think there is an issue regarding url-loader
+ reasonable configuration just open a new issue 😛
from url-loader.
Related Issues (20)
- Specifying options as a query string does not work anymore
- Regarding the conversion of files to data urls, a less than condition was found to be missing HOT 1
- Corrupted or not proceed image matched multiple module rule simultaneously HOT 2
- How can i use name function with url-loader? HOT 1
- Limit option does not support 'Infinity' or 'Max Value' HOT 2
- Multiple references to the same asset in SASS/CSS `url()` breaks replacement process HOT 4
- [email protected] requires a peer of webpack@^4.0.0 but [email protected] was installed HOT 2
- Allow expressing limit as a function HOT 2
- `esModules: true` outputs `url([object Module])` instead of `url(base64String)` for inline local fonts? HOT 22
- Why url-loader stop supporting nodejs 8?, as webpack 5 still supporting nodejs 8 and higher? HOT 6
- url-loader 3.0.0 creates an erroneous export HOT 2
- Usage with require.context? HOT 1
- Blob Url Support HOT 1
- Images not inlined in Svelte 3 app HOT 1
- option to prefix URLs with `file://` HOT 3
- DataURL images also send network request to public path HOT 7
- [question] Do we have webpack 5 support coming for this lib? HOT 1
- NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag. HOT 1
- Different default limit values in documentation HOT 3
- tree shake do not work with image HOT 2
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 url-loader.