I'm trying to define a transition state for my react web application when I'm publishing data to backend.
I want to show an animated gif in my render method.
So I import the gif image (like this https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif )
using a simple import
import logo from '../assets/load.gif'
and add it to my render
like:
<img src={logo} alt="loading..." />
but I get an error in my react-dev server terminal
unknown character
How to add animated gif's to a plain react SPA.
I had a version that used a URL however, it stopped working. I found a site that you can download the spinner as a GIF, then I put that .gif into my images folder. From there you can use:
import logo from '../assets/load.gif'
&
<img src={logo} alt="loading..." />
You can also use require('path') method
The require() method fetches the images and converts it to data URI format Read about Data URI here
<img src={require('../assets/load.gif')} alt="loading..." />
import logo from './gifPath.gif'
<img src={logo} alt="loading..." />
I used this and worked for me as I downloaded the gif
You just have to modify the path
Try something like:
import load from './assets/load.gif'
Related
I'm currently working on a project, a social media type website where people can create posts and add an image to it. So far this is working, the post is created and the image is being saved locally to a folder. The issue I'm having in the home.js file is that the image is not showing on page render, instead it is showing an image icon with the alt text and telling me in the console:
GET http://localhost:3001/images/1664455878582selfie.png 404 (Not Found)
I am not yet getting the link from the SQL database but adding it manually to the code to first check that it will show.
This is the code on the home.js file:
const image = 'http://localhost:3001/images/1664455878582selfie.png';
And the return function:
return (
<div className='home'>
<div className='post'>
<img src={image} alt="postphoto"/>
</div>
</div>
)
The images are stored in project/server/images and the server is hosted on port 3001.
The code is available on https://github.com/ohsand/groupomania2 if this helps!
Thanks in advance!
The direct variable image link doesn't work in React. You should import the image first and then use it. Given below the demo code, you need to modify based on your project.
import image from './images/1664455878582selfie.png';
<div className='post'>
<img src={image} alt="postphoto"/>
</div>
'./images/1664455878582selfie.png' section will be according to your File-Structure.
I'm trying to add some SVG images to my project. I have the downloaded images and have tried dropping them into my file system in MP3 format and SVG format, but this is not working. I'm wondering how I can add these downloaded files into my project.
I've tried everything I've found on Google, but it does not seem to be working.
Use
import { ReactComponent as MySvgFile } from './mySvgFile.svg';
And then render it like this:
<div>
<MySvgFile />
</div>
Hi does anyone know why my png file is not displaying, even if i set it outside of the button element, it does not work.
I have used a JPG and it works but PNG is not, is there any obvious reason why PNG would not be showing up.
Here is an image of my code
Image of code here
First of all wrap the src in {}
Then if using Webpack; Instead of: <img src={"./logo.jpeg"} />
You may need to use require:
<img src={require('./logo.jpeg')} />
Another option would be to first import the image as such:
import logo from './logo.jpeg'; // with import
or ...
const logo = require('./logo.jpeg); // with require
then plug it in...
<img src={logo} />
I'd recommend this option especially if you're reusing the image source.
I don't know the full context, but assuming this React project is using webpack or was created with create-react-app, the image files in your src directory are not automatically being copied to the built application,
Try importing the image to the file where you use it:
import orbImage from "./org.png";
Then use it like so:
<img src={orgImage} />
I will try to help you,
on the other hand for your next message try to review the formatting inspire you from the other posts thx
for your png maybe probleme is your src
// The image.png file must be in the same folder as the JS file
// We import the image using its path
import image from './image.png';
and maybe try to add width="200"
I'm trying to use an image of a search icon on my site, but it's not loading. I keep making sure my directory to the image is correct and it all looks good to me. I am currently in my Navbar>Index.js file and trying to get to my folder assets/icons/search.png
<img src={require('../../assets/icons/search.png')} alt="Search" />
my directory
image not loading on my site
In React you have to first import the image before you can use it.
import Image from '../../assets/icons/search.png'
Then you can use it like this
<img src={Image} alt="Search" />
I have an issue with my react-application when I build it with electron-builder.
I just want to show an application logo with either dark or light font-colour depending on the currently selected theme. For that, I created 2 separate SVG's (dark and light).
The problem
If I start the react-app with react-scripts and electron ., my SVG Icon gets rendered (everything works as expected).
If I create a full electron build of the react-app and afterwards start the build, the icon only appears for the first render.
If the screen gets rerendered, the SVG image is not visible.
I also looked into the dev-inspector of electron and the src property for the image is exactly the same as for the first render.
The imports of my 2 logos:
import LightLogo from "./images/lightLogo.svg"
import DarkLogo from "./images/darkLogo.svg"
The img component:
<img
className={styles.logo}
src={props.theme === Themes.DARK.name ? LightLogo : DarkLogo}
width={"40%"}
alt={"Logo"}
/>
The tag in the compiled app:
<img class="jss742" src="./static/media/darkLogo.667e0ffc.svg" width="40%" alt="Logo">
Logo not working after second render
Unpackaged app.asar
This is my first question, so if you need any further information, feel free to ask.
Thanks
I was able to fix this by adding <base href="./" /> to my index.html file.