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.
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/
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 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
I am trying to import images from an assets folder in my src folder in my react app but for some reason the path is not being recognised.
My folder structure is as follows:
|src
|Assets
|Common
|Components
I am trying to import the image located in the assets folder from the components folder. I was able to import from my common folder to files in the components folder by doing the following:
import * as Constants from '../Common/Constants';
However following this same structure for loading images has not worked
<img src = '../Assets/myimg.png'></img>
What am I doing wrong?
Thanks
In your code you're providing the image source based on your React app's location, which is neither related to web application's root location, nor media or static files locations (to be configured), so the browser will not know how to render it. Depending on what server you use (nginx, Express) you have to configure your static and/or media files and then specify in your image source based on how you configured.
In your present situation you can do the following:
Import
const reactImage = require("../Assets/myimg.png");
And then use it:
<img src={reactImage.default} />
If you had media files already configured on your server and properly resolving, it would be just
<img src="/media/Assets/myimg.png" />
Assuming media location is already configured and is pointing to the parent directory of your Assets.
In your example you were assuming the relative path of your React import and the image source hardcoded into image tag are same, but they are actually not.
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" />