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 =>
Related
enter image description here
I have made this project using TailwindCSS and Vite. This is how my webpage looks in localhost.
But when I deploy it on vercel/netlify, it differs and looks like this.
enter image description here
And here here is how my Tailwind config file looks like:
enter image description here
Please help me with this.
I am using React Native and encountered the following error on my android emulator
enter image description here
enter image description here
I tried several times and the same thing comes out on my cell phone scanning the QR
I also noticed that the folders are empty.
enter image description here
The import module Path is incorrect please check.
'. /App/Redux/action' please check this path
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 built a website on NextJS and deployed it on vercel. On the local environment at localhost:3000, it shows the background image but on vercel it does NOT show the background image.
Below are screenshots
On Vercel :
On Local :
I am setting the background image with the tailwindCSS where I defined the images in tailwind.config.js file and using them in different components. But that is not the issue as it is working fine in local envirenment.
I don't know what is the reason that why it is behaving differently.
Project GitHub Link : https://github.com/mohitm15/Weather-Lytics
Instead of using relative imports to the public folder within your tailwind config, you should leverage next's static file serving to load images from it.
For example, if you look in the DOM, the URL pathing generated during the build process is trying to utilize mini-css-extract-plugin to create a path, but the path is not valid:
When using static file serving, your tailwind config would change from:
'day_sun' : "url('../public/back_big.jpg')",
to:
'day_sun' : "url('/back_big.jpg')",
When compiled, the path may look incomplete, but it's actually directing that request to /public/[image].[ext]:
Working demo (the weather searching feature will not work since NEXT_PUBLIC_API_KEY_1 is undefined): https://weather-lytics-refactor.vercel.app/
Even though I load my images from static file serving, similar bug still happened to my app.
The bug is at my /public/img folder. According to the document, seem like the /img folder have similar name with some next file or folder, which can cause bug.
To fix it make sure you don't have any folder name "img" or something like that . . . (name "pic" work for me)
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.