We Keep Coding

Images not showing in react project

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.

PNG image not displaying, using React

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"

img element is not working in Ionic React

A straight forward image element does not seem to work in Ionic React.
I added an image in assets/images folder and gave the relative path in src of image element.
<img src="../../assets/images/image-1.jpeg" alt=""/>
I created a working example using CodeSandbox. Can somebody help me if I was doing anything wrong here?

Figured out the issue here. I had to put the images in assets folder which will be in public folder.
I moved my local image to public/assets/images/image-1.jpeg and then access that path in img element.
<img src="assets/images/image-1.jpeg" alt=""/>

Electron + React: SVG Loading Issue

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.

Add animated gifs to react web apps

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'