I am trying to import an SVG-File as a React Component. This works fine in other files I am working on. But in the one I have a problem with, instead of the correct image, another image is displayed.
import React from 'react';
import './news-detail.style.css';
import Header from '../header/header.component';
import {useNavigate} from "react-router-dom";
import CustomButton from '../custom-button/custom-button.component';
import { ReactComponent as Img } from './newsdetail.svg';
const NewsDetail = props => {
const navigate = useNavigate();
return <div className='news-detail'>
<Header/>
<h1 className="pageheadline">News</h1>
<CustomButton onClick={() => navigate(-1)}>Back</CustomButton>
<Img className="headerimg"/>
</div>;
};
export default NewsDetail;
This is my code. The newsdetail.svg is not displayed. Instead, a component from my Header is displayed as the image.
Thanks in advance.
Related
I"m trying to render username comments with likes and a like. please see image on demo.
All of this comes form data.json
I can't find a way to display the json properly on the tags. What am I missing here?
Sorry I'm trying my best here with react as I'm quite a beginner.
demo
my index.js
import React from "react";
import styles from "./styles";
import { getCaptionFromEdges } from "./helpers";
const Posts = (props) => {
const { data } = props;
return (
<img src={data.owner.profile_pic_url} /> // this tag works
<p>{data.owner.node.username}</p> // this tag doesn't work
<hr>
//here I should display all comments with its like.
<p>{data.node.text}</p>// this doesn't work
);
};
export default Posts;
You need to wrap your elements with another element (or a Fragment). Try the following:
import React from "react";
import styles from "./styles";
import { getCaptionFromEdges } from "./helpers";
const Posts = (props) => {
const { data } = props;
return (
<>
<img src={data.owner.profile_pic_url} />
<p>{data.owner.node.username}</p>
<hr />
<p>{data.node.text}</p>
</>
);
};
export default Posts;
I'm trying to display an image in a react project, which is created with typescript template.
The code runs and the page shows only image icon, but not the image itself. What am I doing wrong?
I used: create-react app --template typescript. I can't access it if I place it in the public directory. So the folder is placed in the src directory.
this is how it looks like the component:
import React from 'react';
import styled from 'styled-components';
const logo = require('../../src/images/logo.png');
const StyledTable = styled.div``;
export const MyPage: React.FC = () => {
return (
<StyledTable>
<img alt="Profile Image" style={{ width: 100 }} src={String(logo)} />
</StyledTable>
);
};
export default MyPage;
This is how it looks like:
Are you using Create-React-App? If so, there is an easier way to import images
Copied from the doc
import React from 'react';
import logo from './logo.png'; // Just import it
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I have this component called SearchBarScreen :
import React, { useEffect } from "react";
import "./index.scss";
export const SearchBarScreen = (props) => {
return (
<>
<img src="./assets/img/logo.png" className="nav_logo" alt="logo mercadolibre" />
</>
);
};
and my project has this structure:
depending on where I call this component, the image can be broken.
for example in the previous image it can be seen under the folder src/components/items/components, where it is called SearchBarScreen. For example, the image is shown broken on ItemDetailScreen but not on ItemScreen.
I always call it the same way in both components:
return (
<>
<SearchBarScreen props={props} />
</>
);
In ItemDetailScreen
In ItemDetailScreen
If you want the image loading to consistently work, you'll need to import the Image as if it was a component instead of the style you generally use with standard HTML.
Like so:
import React, { useEffect } from "react";
import Logo from '../path/to/image';
import "./index.scss";
export const SearchBarScreen = (props) => {
return (
<>
<img src={Logo} className="nav_logo" alt="logomercadolibre" />
</>
);
};
Edit:
If you absolutely have to use the public folder, which I don't recommend, here's how you do it: https://create-react-app.dev/docs/using-the-public-folder/
You'd basically make the path absolute instead of relative.
References:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
cannot import image with create-react-app
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/
I am learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = () => {
return (
<div className="App">
<Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>
<List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>
<Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
</div>
);
}
export default home;
So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?
You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it
App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};
}
render () {
return (
<Home pics={this.state.pics} />
);
}
export default App;
Home.js
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = (props) => { //access throught props
return (
<div className="App">
<Title pics={props.pics} />
</div>
);
}
export default home;