I'm making a custom React dropdown component and am trying to use custom SVGs as background images based on the selected value. Locally, they are rendered perfectly but when building a sandbox to test my branch I get 405 errors.
Initially, my images were in /public but even when moving to /src... I am still getting 405s.
Both relative + absolute paths do not work.
background-image: url('../images/lock.svg');
background-image: url('/images/lock.svg');
Related
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)
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
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.
I have this CSS code for image of a div:
#side_login {
background-image: url("./images/side.png");
}
It is relative to the src folder, and it works.
My problem is that after build the image file name changes to something like side.3acb161b.png, and for business reasons I prefer to keep it the same (client wants to change the image on the server manually).
Is there a way to do it?
I wanted to play with all different types of styling methods in GatsbyJS. In my project, I have three types of implementing stylings, global CSS, CSS Modules and CSS-in-JS(styled-component). Everything works as expected. But, when I build the project with gatsby build and open one of the index.html where I did CSS-in-js I see that there is a CSS file in data-href tag inside. When I open it, It contains all the CSS stylings of my project. But I didn't even import it to the component where I did CSS-in-js. Why would something like this happen? Why stylings from module.css are being referred inside this file.