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.
Related
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 am currently working on a react page that uses a collection of images from unsplash. I've used an <img src="https://source.unsplash.com/random/?Cryptocurrency/" alt="crypto"/> tag to display the images for each content on the page. however, it displays the same image for each piece of content. I've tried looking at the documentation on the unsplash website but I'm unable to fix the problem. Any advice on where to start would be greatly appreciated.
<img alt="crypto" src="https://source.unsplash.com/random/?Cryptocurrency&1">
<img alt="crypto" src="https://source.unsplash.com/random/?Cryptocurrency&2">
Add some random different parameter to every image as shown in my example and it works.
I am creating weather card with openweather API and i want to use images like:
<img src={`${wicon}.png`} />
So, i have image named '04d.png' and {wicon} variable comes with '04d' code then i put .png at the end of the code but also i need to import image with name.How can i solve this problem? i also tried import image with {wicon} variable but doesnt work.
Note: the above code works like '04d.png' when i run the API and inspect the webpage but doesnt load.
Is there any method to use images without import like HTML?
EDIT: The problem solved when i uploaded the localserver and put {wicon} variable at the end of the localserver link.
Webpage
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 am doing a web application that generates a QR image (PNG format) for a URL. If the URL changes, the image changes too. Here is the HTML (size parameter indicates the size of the QR image):
<div class="image">
<img src="/img?size=150" />
download
</div>
My goal is to the image is downloaded (instead of being rendered by the browser) when a visitor clicks on the download link. How can I do this?
I searched SO and found related posts that use Javascript to download static image. Any difference here?
Update
I found out this SO link works for me.
Download File Using Javascript/jQuery
Actually there is difference the image is dynamically generated or static. Besides, it guarantees the download for any file types regardless of browser settings.
if I understood your problem well, you can do it like in my example on JsFiddle (I used jQuery here):
https://jsfiddle.net/v6qboyfm/
Here is code:
$('a').on('click', function(e) {
var src = ($(e.currentTarget).closest('.image').find('img')[0].src);
$(e.currentTarget).attr('download', src);
$(e.currentTarget).click();
e.preventDefault();
});
If you can use dynamic source for your image then you can use that in your anchor too.As far as browser is concerned ,there is no difference between an actual image and one generated dynamically through some php script.So you can use the download property trick to make it work just any using php
<div class="image">
<img src="/img?size=150" />
download
</div>