I just upgraded my React version to 17.0.2.
Unfortunately, some of my code is not working. Image is not displayed.
This code is one of IMG tag in jSX, and what I did is set 'Src' path dynamically.
It was working without any issue on my previous React version.
Is there any solution to fix this issue?
<img src={require(`../${config.path}/${config.icon}`)} alt='App Icon' />
In React.js latest version v17.x, we can not require the local image we have to import it.
like we use to do before
require(`../../${config.icon}`);
Now we have to you have to put all your images into public folder and then
<img src={`../${config.icon}`}></img>
this method will work.
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.
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 have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.
Any ideas? I don't want to use npm eject
The icon.svg is in public/images
background-image: url(/images/icon.svg);
Failed to compile.
./src/Components/style.scss
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''
In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.
As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).
This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.
I think it is deprecated in CRA 4, (after all.. it was a breaking change..)
there are some workarounds using craco but I suggest to move these files to the src folder.
Try to change to this: (webpack should resolve this to the 'real' path)
background-image: url(./icon.svg);
I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:
import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';
<Icon />
Source:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
As a temporary workaround, you could move the images into src/, import them directly in the components import myImage from '../file.svg' and set style={{ backgroundImage: file }}>?
I have a problem with images in create react app i can not use "webpack import" way of including images because i am uploading them and then i want to show them.
my code of img is simple
<img src={file.path} alt={title}/>
which gets rendered as:
<img src="/public/cdn/files/offer_photo/a70318372a62066c492b4ebdd34491af8bd9bb15.jpg" alt="rez5d9e85_id20150826_036" class="MuiGridListTile-imgFullHeight-620">
as per docs in development i should use /public folder to let webpack server to server it. But it seems it doesn't
the file is in place
i have tried to add process.env.PUBLIC_URL pre-fix to dynamically added img src ..did not helped.
Thank you in advance for any suggestion how to solve this issue.
have you tried to assign the import of the image to a variable? example
const image = require ('path to image')
and then:
<img src={image} />
I'm learning to build static sites using Gatsby v2 and encountering a problem:
When I try to import a logo.svg file from the images folder, it does not work. (See attached screenshot)
I checked in the console, it says the logo is defined but never used? I'm not too sure what exactly i did wrong here. Any pointers would be great!
Your JSX syntax is wrong. It has to be <img src={logo} /> without the double quotes. Have a look at the React docs if that is unclear to you :)