I installed and imported mui-image into my React project and used it as a component <Image>. The issue is my png image did not showed up on screen (neither svg). However, I inserted a random image link on the internet and it worked. Does that mean my the issue is from my png image? And how do I fix this bug?
I installed npm i mui-imagethen imported import { Image } from "mui-image" to my index.js file
then imported my png image as
import { mypng } from "../img/mypng.png";
...<Image src={mypng} />
(mypng has the dimension of: 2880 × 800)
However, it worked with a random url:
<Image src="https://source.unsplash.com/200x200" />
I would really appreciate your help!
You're using object deconstruction in your import. "../img/mypng.png" has no property called mypng. Try :
import mypng from "../img/mypng.png";
Related
I have a problem adding the monitor_heart icon from material-design-icons/font to a react project. The icon is located here:
(https://marella.me/material-icons/demo/) you have to type "monitor_heart"
So far I added icons from material-ui without any problem unfortunately here I have a problem.
I have installed the package:
npm and #material-design-icons/svg
I imported the icon:
import monitor_heart from "#material-design-icons/svg/filled/monitor_heart.svg"
i add it to App:
div <monitor_heart /> /div //or {monitor_heart}
but it not work -I don't know how can I get to this specific icon and just execute it / show it on the screen. What I did it wrong? Can anyone help me?
code located here:
https://github.com/beginnerinreact/material-icon-problem
Ok now it works!
I had to add correct form of import:
import { ReactComponent as Monitor_heart } from "#material-design-icons/svg/outlined/monitor_heart.svg" where I have to stress that this is a React component
I am trying to customize a React Router Link "button" with a custom SVG image. I have found different sources with custom icons to be used, or solution like this but did not succeed with custom image file.The Router link is part of a dynamic list:
<td><Link to={} data-id={} className={"btn btn-success"}>Add new image</Link></td>
And the text would be moved as a hint upon mouseover effect. Any suggestion would be highly appreciated.
Update 1:
So i have tried with and with src. Of course it didnt render and run into error.
I have imported
import { ReactComponent as AddNewImageIcon } from "./WebAppButtons/AddPhoto.svg";
<td><Link to={``} data-id={} className={""}>{<AddNewImageIcon />}Add new image</Link></td>
In this way, it renders, however, there is a weird image background appears under the image:
Screenshot
Did not experience it with SVG files before. Is there any way to remove it or is it the behavior of SVG file in react? The other question is, should it be wrapped into DIV that would be formatted with SCSS or this component can be formatted with SCSS as well, eg.:width/height/hover etc.?
Hi Have the following code in our react native application:
import { SvgCssUri } from 'react-native-svg';
<SvgCssUri style={styles.osIcon} uri={'https://mon.zappiehost.com/images/os/' + props.data.icon} />
I have even tried to use simple SvgUri (instead of SvgCssUri)
But the image still load with out some of the content (Blacks colors):
Also here is the original SVG image used: https://raw.githubusercontent.com/librenms/librenms/master/html/images/os/proxmox.svg
Turns out the blacks were missing due to the fact that React Native SVG didnt do auto fill.
adding fill={'black'} is what was needed into the <SvgUri> tag
I'm new to react, I'm trying to display images from the src/images folder.
but after inserting the correct path, then also the image is not visible.
Here you can see my img tag path and on the left side folder structure
From the Image you provided, looks like you used require("path...") which is not a good way to do so, its valid tho, but not a good practice, its recommended and is common to use import X from "somewhere" syntax.
I suggest you to use either of these two ways to use images in react.
put images in public folder and use relative links in the href tag, i.e:
<img href="/images/panda.png" alt="cute panda" />
put images inside a folder somewhere inside src folder like you did in the image and import images using ES import syntax, and use imported image variable in {} expression for src prop, i.e:
import PandaImg from "../images/panda.png"
const Panda = ()=>{
return <img src={PandaImg} alt="cute panda" />
}
Here is a CodeSandbox Example may help you further explore the code in broader context.
I have searched the answer, but couldn't find any
When importing an image in *.webp in typescript there is a need for declaration file, e.g. declaration.d.ts
In there must be provided something similar to follow up code:
declare module "*.webp" {
const value: any;
export = value;
}
After it, the import method is
import * as img from "path/to/image/img.webp"
<img src={img} alt="404" />
However, after the render no image will show up, because what is essentially exported is not an image itself but an [object Module]. Which can be easily seen with this
console.log(img)
In that img module is the path to put in, so the following can be used:
<img src={img.default} alt="404"/>
But I'm pretty certain,
A) I am declaring in a very wrong way, i.e. there must be a better export in declaration or better type to be written against value
B) I am using import in a wrong way.
So I am open for the better ways to deal with WebP import in React TS.
Help from you or links to rtfm will be much appreciated. Thank you!
TypeScript gives an error if you try to import webp image as ReactComponent. So you should not import it as a component, but use only the source of image. Check this example:
import img from "./images/image.webp";
Now you can use this src in any of your tag like this.
<img src={img} />
In fact you have to use
import img from "./images/image.webp";
and then
<img src={img.src} />
this way it works