Skip to content
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.

Sign up for GitHub

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

Jump to bottom

when generate Data URLs,svg (image.src) content is not correct #48

Closed
1000copy opened this issue Jan 4, 2017 · 3 comments
Closed

when generate Data URLs,svg (image.src) content is not correct #48

1000copy opened this issue Jan 4, 2017 · 3 comments

Comments

@1000copy
Copy link

1000copy commented Jan 4, 2017 •
edited

bug reproduce procedure

  1. main html:main.html
    <html>
      <body>
        <div>Hello svg</div>
        <script type="text/javascript" src="bundle.js"></script>
      </body>
    </html>
  1. one svg file named 100.svg,just filled circle:

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="#000"/></svg>
3. import svg file from main.js:

    var img1 = document.createElement("img");
    img1.src = require("./100.svg")
    document.body.appendChild(img1);
  1. and config svg-url-loader in config file (webpack.config.js)：
    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      },
      module: {
        loaders:[
          {test: /\.svg/, loader: 'svg-url-loader?limit=10000'},
        ]
      }
    };

limit is larger enough force loader make Data URLs other than external svg file,and install loader:

npm i svg-url-loader --save-dev

then run bundle and open main.html:

webpack

img is break link .but if limit=1 ,then OK.

and one more thing ,I find :

module.exports = "\"data:image/svg+xml;charset=utf8,

in last lines of bundle.js .I think \" is root cause .

thank you for attention .
@bhovhannes
Copy link
Owner

Have you tried noquotes options? When true, it removes surrounding double quotes from resulting data urine string. See Readme for example.

@bhovhannes
Copy link
Owner

When limit=1 loader delegates to file-loader, so your svg will be treated as any other image.

@1000copy
Copy link
Author

1000copy commented Jan 5, 2017

👍 it works

@1000copy 1000copy closed this as completed Jan 5, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@1000copy @bhovhannes