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.
Related
I can't figure how to load an image from a project folder to use as a Chakra-UI Avatar.
The src attribute seems to only be able to take external links.
The component file I'm working on is located in the src/Components/ folder, the image I want to load is in the src/images folder.
Why doesn't this render my avatar, and is there a way to make it work?
<Avatar src={"../images/logo.png"} alt={"Logo"} size={2}></Avatar>
I assume you are using react, generally in React you can add images with two methods. You can click here to view more information.
import logo from '../images/logo.png';
<Avatar src={logo} alt={"Logo"} size={2}/>
The other method is to serve the files through the "public" folder and link it in your component. https://create-react-app.dev/docs/using-the-public-folder/
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)
My local images are not showing. I have an application with just an image and it does not show although it does show when I inspect with F12. My App.jsx only has:
return (
<>
<img src={LOGO} alt='' />
</>
)
I tried importing the image like:
import LOGO from './assets/portfolio_logo.png'
I tried using require(); I tried having the images in the public folder; I tried having them in an assets/ folder inside the /src folder. Nothing worked. Do you have any idea what might be done to make images show? Thanks in advance for any help you can provide.
Try keeping all your images in a public folder as shown below:
You can add the following code to access the image from any react component,
<img src='/assets/images/Call.svg' />
Keeping your assets in a public folder ensures that, you can access them from anywhere from the project, by just giving '/path_to_image'.
The problem was another component messing with global styles.
I'm using file loader and can load pngs just fine. I'm doing import myImage from "../../path/image.svg" and then <img src={myImage}/>. When I use the developer tools and click on the SVG I'm trying to include, I get a page with a message like:
"Error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error."
Has anyone seen this error before and if so what can be done about it?
If you look at the file loader docs there is no mention of being able to load svg files.
You need to use a specialised loader. Here are webpack docs for one svg loader but there are plenty of others.
I found out about #svgr/webpack, with it you can import the SVGs like modules and then use them as components.
I used create-react-app to play with react. I noticed that no matter what I type in after localhost:3000/ (which is the default url on dev machine) I always get the content from localhost:3000
This means I cannot access images so that sort of means I can't really do anything with it.
Is this a bug or is it some awesome new feature that I just don't understand? How can this be switched off?
Create React App uses historyApiFallback for the webpack-dev-server, which means that all requests that give a 404 response will fall back to load the index.html file.
If you e.g. add an image to the public folder, you can see that the image takes precedence over the index.html file.
You can also import the image with the help of Webpack and use the import as src in your code, and Webpack will make sure the image ends up in the final build folder for you.
import img from './image.png';
you can use
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
for more information please refer Adding Assets Outside of the Module System