Problem > React > Images in image folder are not rendered.
I am currently working on a React tutorial.
When I try to render images on the page, they are not displayed.
I tried this in vsCode and Replid and got the same results.
How do I put the images in my src > Images folder and still reference and render?
The screenshots may not be very accurate, I changed the names a few times to fix the problem.
I have made sure that they are placed in my src > images folder, and reference each image with "./images/image-name.png". But that seems to be a problem.
(screenshot 1)
I put all the images in the public folder and point to the specific image with "/image-name.png" and that works.
(screenshots 2-3)
Rendering by pointing to the specific image with url works.
(screenshot 4)
[[[enter image description here](https://i.stack.imgur.com/rEAcQ.png)](https://i.stack.imgur.com/57ufp.jpg)](https://i.stack.imgur.com/q9DEV.png)
Related
I am making a react portfolio website and running it on local server 3000 with npm.
For this image it is showing this strange behaviour.
Other images are being shown without a problem.enter image description here The code is also good as other images are fine:
enter image description here
The file structure and file names are as follows:
enter image description here
The image path you have entered seems to be wrong here.
Try changing the image path as mentioned here =>
I made a React app with Vite for my portfolio. There I have buttons that change the image of my known skills when i click them. I have implemented this locally using useState. My website works correctly locally and the images load correctly. But when I build it for production only the images that I have imported as components and added load, but the images in the skills section do not load. I have identified the issue to be that the image path does not translate to the production build directory structure after build so the images are not found. But i dont know how to fix this.
Here is my github repo : https://github.com/coderboy53/portfolio
Putting the images under public folder should solve the issue
You can keep the images under public/images
In React: I couldn't get a background image to load from my CSS file. Upon researching it, I learned that I should have my images folder in my src folder and not my public folder. So I moved my images folder. My background image from my CSS file now works, but React isn't finding any of my other images, which is was before.
I have code such as:
setImage(`./images/${temp.img_bg}`);
and
<img src="/images/logo.png" alt="Logo" />
I've tried different things with the path, but to no avail.
The problem probably because the path is not good i'd like to recommend you this way of importing images.
import tmpImage from "./exmpleImage.png";
and then you use the img like this
<img src={tmpImage} alt="Logo">
Another recommended tip is to put all you're images in a specific hierarchy something like
src -> assets -> images
and most of the times you should import the images like this
import tmpImage from "../../assets/images/exmpleImage.png";
every "../" will get you one folder backward in the path.
I want to optimize all the images on my Gatsby site and to achieve that I have installed the gatsby-image-plugin.
For the dynamic images, I am using the GatsbyImage Component and everything is working fine, no issues here.
The problem is when I want to render static images using the StaticImage Component.
Here is an example:
import laptop from '#images/laptop.png';
If I import the image and I use it this way:
<img src={laptop} alt='laptop' />
The image shows up correctly on the browser, but if I try to do this:
import { StaticImage } from 'gatsby-plugin-image';
<StaticImage src={laptop} alt='laptop' />;
The image is not showing up on the browser and I get the following message in the console:
Image not loaded /static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png
And this error in the terminal:
Could not find values for the following props at build time: src
Image not loaded /static/laptop-5f8db7cd28b221fc1a42d3ecd6baa636.png
I have tried to pass as src a link of a random image from the internet and the image was displayed on the browser! Why is it not working when I use the image that I have in my assets folder?
PS; Reading the plugin documentation I saw that there are some restrictions like you cannot pass images that are coming from the props, but this is not the case! I am importing the image directly from the assets folder.
Any leads, please? Thank you in advance.
PS; Reading the plugin documentation I saw that there are some restrictions like you cannot pass images that are coming from the props, but this is not the case! I am importing the image directly from the assets folder.
You're importing the image from your assets folder, but you're still passing it to StaticImage as a prop. The correct usage is as follows:
<StaticImage src='#images/laptop.png' alt='laptop' />
Per the Gatsby Image Plugin documentation, src must be type string. You're currently passing an object {laptop}. Change it to a string with the images file path and it will display.
How do I add a simple svg image to my login page? I've tried img ng-src and div list card and a simple css class called logo but my image is never shown. I never get a file not found but I wonder if I'm placing the image in the correct location - any suggestions?
Thanks!
Look in your dist folder, and check where your images are in relation to your html folder. For me, it was up two folders:
<img src="../../icons/myicon.svg" />