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.
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/
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 am new to Gatsby and React. I have set up a site using LekoArts' gastby-theme cara
I understand that what I create in the theme folder (src/#lekoarts/gatsby-theme-cara) will shadow the files seen in the theme's src folder. Which can be viewed here on github:
https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara/src
What I want to do is shadow the "templates/cara.tsx" file, there I am able to affect the size of different sections in the theme.
The issue is that that .tsx file has many other components that need to be imported that I don't want to shadow, how do I import these files that are on the themes directory (without having to shadow them as well)?
Here's a screenshot of the "templates/cara.tsx" file and all it's imports underlined
I have tried shadowing all files that need to be imported, but it got out of hand as they all have their own dependencies that need to be imported as well.
Thanks for your time
For anyone in the future that gets confused by this same thing:
You can access the theme's files using:
import Layout from "#lekoarts/gatsby-theme-cara/src/components/layout"
If you are using a different gatsby-theme check 'gatsby-config.js' look for plugins: [ { resolve: use this path for accessing it's src,
for my theme it gives "#lekoarts/gatsby-theme-cara" so I then add src/components/layout to access the layout component (without having to shadow it locally).
wondering if anyone can help me. Im following a tutorial which has told me to put the images in the public folder in an app created with create-react-app
'./img/newyork.jpeg'
this is the path the tutorial told me to use for images in the public folder however the images aren't loading and i cant understand why any help would be much appreciated
Build File Structure
You shouldn't keep any image assets in the public folder other than favicons etc See this thread also: The create-react-app imports restriction outside of src directory (TLDR: "This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.")
Generally in a create-react-app I would import images like so:
import lovelyImage from 'images/lovely-image.jpg'
and then rendered:
<img src={lovelyImage} alt={''} />
(the example above would assume the images directory is in the src directory (not public))
process.env.PUBLIC_URL + 'your image path'
is a solution I found that works
I have a simple react app deployed on Heroku, (using the static-build pack https://github.com/heroku/heroku-buildpack-static) however the images are not loading. I know this must have to do something with the path, as it works for me locally, however nothing I have tried works.
Here is what the directory looks like
build
index.html
bundle.js
node_modules
public
images
logo.png
index.html
src
components
LeftSidebar
index.js
static.json
webpack.config.js
Here is my static.json file:
{
"root": "build",
"routes": {
"/**": "index.html"
},
"https_only": true
}
I have set the image src (jsx in the LeftSidebar component) to have a relative path from the build to the public directory. The relative path from the build folder to the public folder like so:
"../public/images/logo.png"
The reason I did the above, is because I figured that since the only thing that is actually being ran in the browser is the index.html file which loads the bundle.js, which is invoking the <img /> this relative path would work. (please correct me if I'm wrong here)
I have also tried setting the path such that it is relative from my specific component LeftSidebar -- index.js to the image in the public folder:
../../../public/images/logo.png
I have also tried
public/images/logo.png
and a few other variations, all with no luck.
I think that I must be missing something more important about the way a static web server (Nginx in this case) will server static assets. Or int he way Webpack ultimately creates the bundle.js file.
It is also quite odd that there is no 404 status code returning, but the image won't load and the response in the network tab is nothing but a white screen.
When importing images into React, we usually rely on Webpack to copy the appropriate files over, rather than having to reference a public directory, e.g.
src
components
MyComponent
index.jsx
image.png
In my index.jsx file, I'd simply import the image like so:
import myImage from './image.png';
Finally, and most importantly, you need to update your Webpack config to include a loader for your images if doesn't already include one, such as file-loader.
See this question/answer for more details on the process: How to import image (.svg, .png ) in a React Component