I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
Related
I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command
npm install #material-ui/core
And my code looks like this:
import React from 'react';
import './Header.css';
import { Button } from '#material-ui/core';
function Header() {
return (
<div className="header">
<div className="headerRight">
<h1>Hi There</h1>
<img
className="headerIcon"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
alt=""
/>
<div className="button">
<Button>Click Me</Button>
</div>
</div>
</div>
);
}
export default Header;
and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.
My App.js code looks like this
import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';
function App() {
return (
<div className="App">
<Header/>
<Banner/>
</div>
);
}
export default App;
Issue for me was that I had installed MUI before jumping into my react ap (cd my-app), so the MUI package was in a parent "Node Modules" directory of my react app.
Deleted the parent Node Modules directory and reinstalled MUI in my react app.
I created a react app and it looked good , until I deployed it. After deployment, i cannot see the images, even if react loads them (i see that in the networking tab on chrome). Also the Content type was set right. Also when i go directly to the miage links, chrome renderes them.
This is the component responsable for showing the images:
import "./../styles/firstPart.css";
import logo from "./../images/croped_down.png";
import background from "./../images/background.jpg";
import PreloadImage from "react-preload-image";
import Navbar from "./../components/navbar";
const FirstPart = () => {
return (
<div className="firstPart">
<div className="mainGradient"></div>
<PreloadImage className="background" src={background} />
<PreloadImage className="logo" src={logo} />
<Navbar />
</div>
);
};
export default FirstPart;
Image path is relative and works for local. The same won't be working in prod as it takes absolute page. Check the path of image in Developer Console and see if the path is same as existed
I'm doing server-side rendering with React DOM Server using Create React App. I'm trying to load a static image but it's not showing up in my browser. Here is my app.js code
import './App.css';
import React from "react";
import Pic from './Images/pic.png'
function App() {
return (
<div className="App">
<img src={Pic} />
</div>
);
}
export default App;
The image is copied into the build folder but it's not showing up in the browser
Folder hierarchy
I get the following error in the browser
GET http://localhost:8000/[object%20Object]
Try
<img src={require(./Images/pic.png)} width="100" height="50" />
I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div
I use 16 React Players on my site and imported 16 different mp3 files. I´m worried about the loading time, so I thought it might be a good solution, if the mp3 file is only loaded, when the play button is clicked. Is this possible and can anyone give me a hint how to achieve this?
This is the beginning of the code from my Home.js component:
import React from 'react';
import ReactAudioPlayer from 'react-audio-player';
import Badge from 'react-bootstrap/Badge';
import mp3_file from '../assets/music/mein_ahnenland_peru_maintheme_titel_torben_jan_mueller.mp3';
import action from '../assets/music/99firefilm2018_torben_jan_mueller_16bit_48khz_v3m_action.mp3';
import adventure from '../assets/music/schmonz_ep2_goldgraeber3_torben_jan_mueller_ueberarbeitet_n_cut.mp3';
import animation from '../assets/music/revolution_radio_torben_jan_mueller_16bit_48khz_final_m.mp3';
import comedy from '../assets/music/99firefilm2018_torben_jan_mueller_16bit_48khz_v3m.mp3';
import doku from '../assets/music/mein_ahnenland_peru_maintheme_titel_torben_jan_mueller.mp3';
import drama from '../assets/music/mein_ahnenland_peru_umweltzerstoerung_torben_jan_mueller.mp3';
import erotic from '../assets/music/02- Carefree.mp3';
import fantasy from '../assets/music/logo_jugendfoerderung_torben_jan_mueller_16bit_48khz_v8_final_master.mp3';
import horror from '../assets/music/13- Searching For Their Friends.mp3';
import lovemovie from '../assets/music/mein_ahnenland_peru_wiedersehen2_torben_jan_mueller.mp3';
import music from '../assets/music/daughterly_trailer_strings.mp3';
import other from '../assets/music/wodka_gorbatschow_plakadiva_torben_jan_mueller_16bit_48khz_v2m.mp3';
import sciencefiction from '../assets/music/block701_crowdfunding_halfbeat_atmo_torben_jan_mueller_16bit_48khz_n.mp3';
import western from '../assets/music/italowestern_suite_torben_jan_mueller_16bit_48khz_vintage1.mp3';
export const Home = () => (
<div className="flex-container">
<div>
<div className="adventure genreHeight">
<div className="genreBackground">
<h4>Adventure <Badge variant="success">New</Badge></h4>
</div>
<div className="playerBottom">
<ReactAudioPlayer
src={adventure}
controls
/>
</div>
</div>
<p>© Iván Tamás - Pixabay</p>
</div>
And finally a screenshot of the page:
After I read this documentation I found the solution: You just have to add this line
preload="none"
to each player instance and the audio file is only loaded, when you press the play button.
You can check the result with the Google Chrome dev tools. Go to Network, enable "Disable cache" and reload the page. As you can see in this screenshot, there´s no mp3 file preloaded.
This is, how the player looks:
<div>
<ReactAudioPlayer
src={mp3_file}
controls
preload="none"
/>
</div>