Giter VIP home page Giter VIP logo

Comments (9)

andresmrm avatar andresmrm commented on May 31, 2024 1

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.

xuxinhang avatar xuxinhang commented on May 31, 2024 1

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.

defrex avatar defrex commented on May 31, 2024

I'm having this same issue.

@andresmrm were you able to resolve it?

from url-loader.

defrex avatar defrex commented on May 31, 2024

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.

andresmrm avatar andresmrm commented on May 31, 2024

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.

defrex avatar defrex commented on May 31, 2024

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.

andresmrm avatar andresmrm commented on May 31, 2024

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.

michael-ciniawsky avatar michael-ciniawsky commented on May 31, 2024

@andresmrm Still got this regression, I would like to hear more about this if possible 😛

from url-loader.

michael-ciniawsky avatar michael-ciniawsky commented on May 31, 2024

@andresmrm If you think there is an issue regarding url-loader + reasonable configuration just open a new issue 😛

from url-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.