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"

jquery image added to page but it is empty

I have a div tag.
<div class="imsSummaryItem" id="imagesPreview">
</div>
<asp:Image ImageUrl="C:\Users\John\Desktop\TempFolder\16.jpg" runat="server" /> --not showing up as well.
In my javascript:
<script type="text/javascript">
function loadImages() {
$('#imagesPreview').append('<img src="C:\\Users\\John\\Desktop\\TempFolder\\16.jpg" />');
}
</script>
I am ending up with a hollow image. I dont see it. Just like an icon but its empty.I hope you understand what I mean. When I check the image properties it says 16.jpg and remaining all values are Not Available. What is wrong here?

I think image you are trying to show is not in web application folder / virtual directory.
Move image to your web application folder and then specify the relative or an absolute URL in ImageUrl property.
If you dont want to move images to your web folder then your only choice is to write HttpHandler which will read images from specified folder and transmit it to the client. This will also require some specific permissions for your web app IIS user to access some folder outside the web app scope.

I think escape sequence is not correct that is why it not able to reach that path.
try this: double backslash before forward slash ... SO is not allowing me to write it properly, it is omitting one back slash. i hope you got my point
"C:\\\/Users\\\/John\\\/Desktop\\\/TempFolder\\\/16.jpg"

Always try to have the images you need inside your solution.
Just copy the image from temp folder and have it inside the resources
Like have the image in Resources/Images folder so that you can refer it as
$('#imagesPreview').append('<img src="../Resources/Images/16.jpg" alt="text" />

Checking if a certain URL exists and return an image

I need a way to check if an image has been uploaded. I want to do this by checking if a certain URL is existing.
I am getting clients to upload files to my site for their account and I want a tick to appear next to the upload box to show that the file exists.
The uploaded file URLs will be something along the lines of: http://www.example.com/Practitioner-Area/($user.firstname$)+NI
The tick file will be:
http://www.example.com/Practitioner-Area/images/complete.jpg
I think I will need a jquery but I have never used them before. So I would prefer a standard html code tbh, but will use jquery if needed.
Any help would be much appreciated.
Matt

Try the onerror event:
<img src="image.gif" onerror="alert('The image could not be loaded.')">
Then try to load that outside of screen or something.
Edit: This will create errors on the page so the AJAX result answer is the better one.

prettyphoto not displaying thumbnail but resolves image when clicked

I had to move my wordpress site to a different directory folder on my hosting server. Now for some reason on the portfolio pages of my website it's not displaying the thumbnail preview for lightbox images. The image will display when the thumbnail is clicked so I know it's pulling the right image from the right place but why is it not showing the preview thumbnail?
Here is a link:
Any help would be really appreciated!

You don't have the img src defined which PrettyPhoto uses to pull the thumb:

OK, well based on your comments the switch across from one server to another has stopped the method aq_resize() working. It is called Aqua-Resizer, here's the Github page;
https://github.com/sy4mil/Aqua-Resizer/blob/master/aq_resizer.php
The wiki on it explains it's use but if all you've done is change the server then you will have to look at other explanations for why it's not working. The following is a list you can start looking through;
Make sure your functions.php still has require_once('aq_resizer.php'); with the correct path to this script. Make sure the script is actually there. If it is try changing the file permissions on the file to see if that helps. If the script uses a cache directory try changing the permissions on this.
It could also be that the PHP version on the new server is different (maybe, I'm guessing now)? Check that too.