I tried to import a simple picture for my chrome extension and I got that :
(!) Plugin typescript: #rollup/plugin-typescript TS2307: Cannot find
module '../img/intro.png' or its corresponding type declarations.
src/pages/popup/App.tsx: (2:18) 2 import logo from '../img/intro.png';
My App.tsx is super simple
import React from 'react';
import logo from '../img/intro.png';
const App = (): JSX.Element => {
return (
<div style={{
}}>
<h1>My App</h1>
<img src={logo} alt="image"/>;
</div>
)
}
export default App
I based my app on this repo : https://github.com/rossmoody/ts-extension-starter?ref=reactjsexample.com
If I use require instead the picture doesnt show (my extension is just the little black square:
In typescript , Module Resolution resolves the import using only the files with extension: .ts .tsx or .d.ts.
a simple trick to fix this error :
instead of : import logo from '../img/intro.png';
use : const logo = require("../img/intro.png") ;
Related
I am using Tailwind CSS to build a landing page that I have divided into sections. I want to use a background image on the particular <div> so that it only shows up in that section. I also plan to put a button and text box on top of it.
My attempt is just not working. I tried using url() in both a Tailwind bg class and a normal React style prop, but neither version works.
Using the React style prop:
import React from 'react'
import image from '../../public/images/Rectangle 37.png'
const ReadySection = () => {
return (
<div
className="border-solid border-2 border-sky-500 h-[300px]"
style={{backgroundImage: `url(${image})`}}
>
</div>
)
}
export default ReadySection
Using the Tailwind utility class:
import React from 'react'
const ReadySection = () => {
return (
<div className="bg-[url('frontend\public\images\Rectangle 37.png') border-solid border-2 border-sky-500 h-[300px]">
</div>
)
}
export default ReadySection
I'm using create-react-app and named the app "frontend", so the path of the image is:
frontend/public/images/Rectangle 37.png
The path of my ReadySection component is:
frontend/src/components/ReadySection.js
this my code
import Header from "../../../components/Header";
import WaveBoard from "../../../components/WaveBoard";
import HeaderBackground from "./common/HeaderBackground.svg";
import "./MainPage.css";
export default function MainPage() {
return (
<div className={"MainPage"}>
<img src={HeaderBackground} alt="Logo" />
<Header />
<WaveBoard />
</div>
);
}
when i want to import SVG from public folder i get this error.
./src/routeCollector/Page/MainPage/MainPage.tsx
Module not found: Can't resolve './common/HeaderBackground.svg' in 'C:\Users\darkc\Desktop\New folder (7)\src\routeCollector\Page\MainPage'
According to the MDN documentation for the import statement:
The static import statement is used to import read only live bindings which are exported by another module.
Import is not used to "import" a graphic, but to import variables from another script file or a library/module.
You could set the path to the svg-file in a constant like this:
const pathToHeaderBackground = './common/HeaderBackground.svg'
and then include the variable in the src-attribute:
<img src={pathToHeaderBackground} alt="Logo" />
You dont seem to import from public folder, as the error says.
Your path should include 'public' in its path if its based in public folder.
However, if it comes to SVGS in react I would suggest to import them as components, this works in my experience best. Example:
import { ReactComponent as YourSvgComponentName } from "YourPath";
I have created a sandbox to show you proper imports and suggested svg import in react
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
Have a react js project with typescript.
I have this in one project (generated with official reactjs starter + typescript):
import logo from './ty.png';
...
<img style={{height: "25px"}} src={logo} alt="Logo" />
Works
In an other project I have exactly the same. But it's built from http://demo.g-axon.com/jumbo-react-flat/#/app/dashboard/default
It's not working there. The src is missing.
What can be wrong? Webpack config? Tsconfig? What shall I look for?
import * as React from 'react';
import logo from './ty.png'
const App = ({ }) => {
return (
<img src={logo}/>
)}
I want to import a different set of SVG icons based on my Branding variable.
I try something like this :
import { BRANDING } from 'BrandingBuilder';
import {`${BRANDING}-icons.svg`};
But I know React didn't support to import a {variable}. Is there a workaround ?
According to the React Docs:
You can
also import SVGs directly as React components. You can use either of
the two approaches. In your code it would look like this:
import { BRANDING } from 'BrandingBuilder';
import { ReactComponent as Logo } from `${BRANDING}-icons.svg`;
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);