0

I am trying to contribute in open source for the first time. I am styling an image(to be more specific .. size of the image) in react(by passing src or url of image and size as two props to a custom component) using scss and it works fine when url is web based for example url="https://source.unsplash.com/1000x2000/?Nature". But when I pass it in data uri format like this -> url="data:image/svg+xml;base64,PHN2Z....." to my custom react component as a prop, size has no affect on the image.

So I just want to know whether there is any difference I should be aware of while styling this custom react component.

Note :- The problem only occur when I pass a additional "fullScreen" prop which just shows the image in full screen. But it works fine when i pass a web based URL and not a data URI. It also works with data URI when I don't pass the fullScreen prop to my react component.

Kartik
  • 3
  • 3
  • Does this answer your question? [Should I embed images as data/base64 in CSS or HTML](https://stackoverflow.com/questions/5258057/should-i-embed-images-as-data-base64-in-css-or-html) – Roy Sep 22 '20 at 07:20
  • Is your "web based url" also pointing to an svg? Does that svg image embedded in the data: URI have a `width` and `height` attribute defined on its root `` element? If so using which unit? Anyhow, we'd need more details to be able to help you e.g a [mcve]. – Kaiido Sep 22 '20 at 07:27
  • Please refer to this sandbox. https://codesandbox.io/s/v5rr7?file=/index.js . If I comment allowFullScreen line, it works as expected. @Kaiido . where size="l" we can use specify m / s / xl instead or we can even specify any number(i.e. in px). – Kartik Sep 22 '20 at 11:05
  • @Roy user can opt to use any data format. I just want to ensure that if the user/developer wants to use data uri, it should work as expected. I just want to fix this bug reported in elastic ui's repository. I am a student trying to learn open source contribution. – Kartik Sep 22 '20 at 11:11

0 Answers0