Skip to content
This repository has been archived by the owner on Apr 1, 2023. It is now read-only.

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

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

@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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants