I'm trying to require an image from a location inside the SRC folder in React (not from public unfortunately) and the specific name of that image will be granted from props.
The issue is that I need the image to be set as the background image of a <div />. The image doesn't show up.
I tried that:
<div
style={{
backgroundImage: `url('${require(`../../assets/images/home/${banner?.srcString}`)}')`,
backgroundSize: "cover"
}}
/>
Is there any way to solve this without using <img /> and without moving all images to /public?
No, you can not require images dynamically from src directory, and it's not just limited to React, it's about all JavaScript frameworks that use Webpack internally. Also, this is exactly one of the use cases of public directory, as it's been mentioned in the documentation: When to Use the public Folder
You can also check the following links for more discussions around this question:
Load local images in React.js
How to give Image src dynamically in react js?
React, load images local from json
Related
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.
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.
I am having an issue on my site where my above-the-fold masthead image comes in way too late which makes the site feel slow. The site is built with GatsbyJS where I am using the Gatsby Image plugin as well. I have tried with rel="preload as="image" but this didn't seem to do any difference:
<Img
fluid={
wpgraphql.imageFile.childImageSharp.fluid
}
id="hero__image"
style={{
position: "initial"
}}
rel="preload"
as="image"
/>
After reading the Gatbsy Image documentation I found that loading="eager" could make a difference as well. I therefore have tried adding the loading="eager" but still my masthead image is one of the last things to be discovered in my waterfall.
How can I make my masthead image load critical and come in earlier in my waterfall?
Gatsby Image uses a low-quality preview image in the src and delays the switch from this preview image to the full-size image until Gatsby is initialized client-side (which happens after React hydrates). For this reason it's never going to be particularly performant for above-the-fold content. I recommend using the srcSet data that comes back from the query you have now directly:
<img
srcSet={wpgraphql.imageFile.childImageSharp.fluid.srcSet}
alt=""
loading="eager"
/>
From here you can style it to match your desired output.
I've built an ASP.NET Core solution that is mainly just a shell for a React app. It's a card game that uses svg image files to represent the cards. When I run locally, the cards display as they should.
The issue is that when I build a Docker image and serve it up from Docker Desktop the images no longer show--just a placeholder where each would go.
The each card is the result of a small function:
export const Card = (params) => {
return <img src={'./cards/' + params.card + '.svg'}
onDoubleClick={() => { params.action( params.card ) }}
/>
}
My best guess is that the needed relative path in the docker image needs to be altered somehow so the files can be found.
In the VS solution, the folder structure looks like the following:
root
ClientApp
public
Cards <== card image svgs are here
src <==js code here
Any suggestions as to what might be causing the Docker version to not display the images?
Perhaps my better questions might be if the structure is something I should be managing in Dockerfile(?) or what a good way to see the structure Docker is using to arrange the files in the container?
Edit
I've noticed it doesn't seem to recognize a sub-folder (or I'm not referencing it correctly). Any images I place is the public folder (parent of cards) show.
To reference svg in public use:
<img src={process.env.PUBLIC_URL + '/yourPathHere.svg'} />
I had the same problem, deploying react with nginx into a docker
I used svg in my react app as an imported entity, so I imported the image and placed it as an variable in img.src attribute.
import Plus from 'svg/plus.svg'
.
.
.
<img src={Plus} />