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.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: How to use img files other than svg. #46

Closed
AlbertSanIza opened this issue Aug 3, 2018 · 3 comments
Closed

Question: How to use img files other than svg. #46

AlbertSanIza opened this issue Aug 3, 2018 · 3 comments

Comments

@AlbertSanIza
Copy link

@AlbertSanIza AlbertSanIza commented Aug 3, 2018

It might not be "create-react-library" specific question...

but I am trying to use png or jpg images in my component but I just cant find a way to do it
馃槶

Appreciate your help.

@transitive-bullshit

This comment has been minimized.

Copy link
Owner

@transitive-bullshit transitive-bullshit commented Aug 3, 2018

You can import them in your source component and use them as you would in any CRA app.

For example:

import React from 'react'
import image from './test.png'

export default () => <img src={image} />

The default rollup.config.js we generate is using rollup-plugin-url to include these types of assets in the bundle. You may have to modify its parameters to include larger images in the bundle.

@AlbertSanIza

This comment has been minimized.

Copy link
Author

@AlbertSanIza AlbertSanIza commented Aug 3, 2018

Thanks for the fast response.
Now that you mention the size, I used a smaller image and it worked so thanks for that.

For the previous larger images I was trying to use I noticed that they are sent to the /dis folder with a different name and that is the same name that the example side is trying to use but it cannot find it :(

any ideas on that?
image

@transitive-bullshit

This comment has been minimized.

Copy link
Owner

@transitive-bullshit transitive-bullshit commented Aug 4, 2018

@AlbertSanIza change your rollup config's url plugin to look like this:

    url({
      limit: 0, // 0 => copy all files
      include: ['**/*.?(ttf|woff|woff2|png|jpg|svg|gif)']
    }),

This will embed all files instead of only files < 10k.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can鈥檛 perform that action at this time.