I have created image folder in Src. But that is not working for Background-image:url('') in CSS file. Iam getting error. I have 100's of images. Every time i need to import and bind in jsx. Is there any other way to resolve this issue?
Related
I just cloned PCS's frontend and I'm trying to figure out how to change the logo of pancakeswap. How do I change it?
Tried to locate all SVG file but I couldn't find the PCS logo.
I've just started a Vite React TS project. I need to import a svg image from my assets folder in my Home Page. When i try yo import it with the following line: "import mascotImageUrl from "../assets/mascot.svg";" the console show that it can't find the module '../assets/mascot.svg'.... Can Somebody help?
I'm following a tutorial and in it a .svg file is being imported as a component. The line of code is:
import {ReactComponent as OfferIcon} from '../assets/svg/localOfferIcon.svg';.
I understand that the .svg file is being imported as a component, however, I dont understand where ReactComponent comes from? I've checked the .svg file and it isn't mentioned in it. Is this a special keyword when importing an .svg file? If someone can point me to the documentation then that would also be nice.
I assume you are using Create React App. Create React App uses SVGR to transform .svg files so you can just import them in your React app. The svg file is transformed in a way that it exports a React component called "ReactComponent". That's why you have to import "ReactComponent" from the file and then rename it to whatever you would like!
Find more information in this really nice blog post. Basically, you can just use <svg> tags in your JSX. However, if you want to import .svg files, you will need a transformer that transforms the content of the file into a React component, which just returns the <svg> content in JSX.
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'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.