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

How to load image file (PNG/JPEG) as embedded <image>？ #179

Open
meowtec opened this issue Aug 17, 2017 · 5 comments · May be fixed by #410
Open

How to load image file (PNG/JPEG) as embedded <image>？ #179

meowtec opened this issue Aug 17, 2017 · 5 comments · May be fixed by #410
Assignees
@kisenka
Labels
bug

Comments

@meowtec
Copy link
Contributor

meowtec commented Aug 17, 2017

In the old version (0.3), I found that if I use svg-sprite-loader at a PNG file, then the PNG will be convert to a svg with embedded BASE64 <image> tag.
https://github.com/kisenka/svg-sprite-loader/blob/v0.3.1/lib/processings/raster-image-to-svg.js
While in the latest version, this feature has been removed.

I wonder how can I get the same functionality in version 3.2 ? Do I have to use anthor loader, just transform PNG to svg, like this:

PNG  [Some loader]->  SVG  svg-sprite-loader->  sprite.SVG
@kisenka
Copy link
Contributor

kisenka commented Aug 17, 2017

@meowtec could you please attach PNG image which you try to transform?

@meowtec
Copy link
Contributor Author

meowtec commented Aug 17, 2017 •
edited

PNG file is:

opacity

then I require it using:

import 'svg-sprite-loader!./images/opacity.png'

In version 0.3, I got a SVG symbol like this:

<symbol>
<image xlink:href="data:image/png,base64;.."></image>
</symbol>

While In version 3.x, I got the error message:

ERROR in ./node_modules/svg-sprite-loader/lib/loader.js!./modules/renderer/images/opacity.png
Module build failed: InvalidSvg: svg-sprite-loader exception. 

�PNG

IHDRf�:%gAMA��
                 �asRGB���PLTE������ӍvJIDATh��ұ    �쿴n ��Gگ¥2/O�8b5x��<��<��<��<��<��<�p0h�i�⅚}7IEND�B`�
    at Object.loader (/Users/berton/workspace/git/Imagine/node_modules/svg-sprite-loader/lib/loader.js:32:11)
 @ ./modules/renderer/App.tsx 12:0-48
 @ ./modules/renderer/Index.tsx

@meowtec
Copy link
Contributor Author

meowtec commented Aug 17, 2017 •
edited

Now I write a loader to do it:

{
  test: /\.(png|jpg)$/,
  use: [
    'svg-sprite-loader?symbolId=icon-[name]',
    'image2svg-loader',
  ],
},

I don't know if there is a ready-made solution.

@kisenka
Copy link
Contributor

kisenka commented Aug 17, 2017

@meowtec looks like a bug, sprite-loader should detect PNG image via svg-baker.

@kisenka kisenka self-assigned this Aug 17, 2017
@kisenka kisenka added the bug label Aug 17, 2017
@onthedesk
Copy link

i got the same exception when i loaded png file throw sprite-loader

@meowtec meowtec linked a pull request Sep 1, 2020 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kisenka kisenka

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add raster image support meowtec/svg-sprite-loader
3 participants
@onthedesk @kisenka @meowtec