I have written a code for my website and unfortunately, i am not able to load images that are located in my local library. I have moved my images folder inside 'src' folder, but the image doesn't load at all.
Here is the code for my component called 'Landscape' which I am trying to load.
Code:
import React, {Component} from 'react';
import {Grid, Button, Row, Col, Thumbnail} from 'react-bootstrap';
import 'react-bootstrap-carousel';
import './Landscape.css';
export default class Landscape extends Component{
render(){
return(
<div className="thumbnails">
<Grid>
<Row>
<Col xs={6} md={4}>
<Thumbnail src=".Pictures/1.jpg" alt="242x240">
<h3>Elephant</h3>
<p>zoo</p>
<p>
<Button bsStyle="primary">Like</Button>
{' '}
<Button bsStyle="primary">Dislike</Button>
</p>
</Thumbnail>
</Col>
</Row>
</Grid>
</div>
);
}}
If you have a few images you can just import it directly in your component
import logo from './Pictures/1.jpg';
Then call it
<img src={logo} alt="logo" width={"240"} height={"240"} />
if you have hundreds of images because you can’t use import paths, you have to create a images folder in the public folder and use this code.
//This is the regular way.
<img src={process.env.PUBLIC_URL + 'images/profile.svg'} width={"200"} height={"200"} className="profile-img" alt="profile" />
Another way you can specify each component has a images.js file, then import all the images that retarded of that component in images.js and name it as the related component name
images.js
import logo from './images/logo.svg';
import cover from './images/cover.svg';
import profile from './images/profile.svg';
import background1 from './images/body.svg';
export default {
logo,
cover,
profile,
background1
}
Then in your component you can just import images.js file:
import images from './images';
Then call any img you want:
<img src={images.logo} className="App-logo" alt="logo" />
<img src={images.cover} className="App-logo" alt="logo" />
<img src={images.profile} className="App-logo" alt="logo" />
<img src={images.background1} className="App-logo" alt="logo" />
My answer only applies if you are using create-react-app or Webpack with the file-loader plugin.
You have to import the picture file before using it. This has to be done in order for Webpack to bundle the images correctly for the production build.
import pic1 from './Pictures/1.jpg';
...
<Thumbnail src={pic1} alt="242x240">
You can read more here.
Put all your images in one 'images' folder under the public folder, then anywhere in your project, you can use the following path in img element:
It works fine with projects initiate with create-react-app
Related
Can anyone help in importing image into mdx file ?
I want to display it on the storybook, but not sure how to import this :( This will be created in a react component, but I would like to see it as well in a mdx file. SO far have this file:
import { Meta, Canvas, Story, ArgsTable } from "#storybook/addon-docs"
import Image from "../Image"
<Meta title="Components/Image" component={Image} />
# Image
<Canvas>
<Story
name="Overview"
args={{
name: "arrowDown",
}}
>
{Template.bind()}
</Story>
</Canvas>
<ArgsTable />
export const Template = (args) => <Image {...args} />
How and what kind of argument should I add there in order to add the img image to this storybook in mdx?
I have this warning in my console, when I use nextJs Link component. Can you help me solve this problem and explain me why.
here is the console message
here is my piece of code
import React from "react";
import Image from 'next/image'
import Link from 'next/link'
import logo from '/public/Images/E2R5_white.png';
const Logo = () => {
return (
<div className="">
<Link href="/">
<Image
src={logo}
height="50"
width={"80"}
alt="Logo - E2R5"
/>
</Link>
</div>)
}
export default Logo;
Thank you for your help .
The quick solution is to use <a> tag inside Link.
<Link href="/">
<a>
<Image src={logo} height="50" width={ "80"} alt="Logo - E2R5" />
</a>
</Link>
Useful link to read: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component
I installed react then acc to a tutorial video I deleted all files in src directory and then created new index.js, index.css and app.js and other files but now it is showing an error for me
I also googled it; some answers were corrected but rearranging script position and some were corrected by giving id root in app.js to a <div> but all those are not working for me.
This is the error:
Error: Target container is not a DOM element.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
I just installed ReactJS and now it is showing the above error. Can someone please, help me to solve the problem?
PS: For further reference following is a screenshot of the error I get.
Make sure you have index.html file with an element which has an id root, and make sure your index.html file is in the public directory
I am trying to use the Carbon Design's UI Shell component.
I followed this blog to install all libraries, dependencies, etc.
Below is my code:
import {UIShell} from 'carbon-components-react';
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<UIShell>UIShell Placeholder</UIShell>
</header>
</div>
);
}
export default App;
When I run this code, I get:
"Failed to compile: ./src/App.js Attempted import error: 'UIShell' is not exported from 'carbon-components-react'."
According to the repository, UIShell is a component of carbon-components-react.
Why am I getting this error?
If you look in ./node_modules/carbon-components-react/lib/index.js, you will see that, although UIShell is defined in .../lib/components/, it's not exported.
So the question is actually... how can we access the UIShell components from the carbon-components-react component library when it's not exported?
I have found that that it's possible to import the UIShell component library explicitly:
import {...} from 'carbon-components-react/es/components/UIShell'
Or, if you are not using ESM, I think that you could require the components via the following:
require('carbon-components-react/lib/components/UIShell')
I´m trying to use the official semantic-ui-react for the first time with React. I´ve built a brand new react application:
$ create-react-app test
And I then tried to add the same react image as follows in App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import { Image } from 'semantic-ui-react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className="ui container">
<h1>Hello World</h1>
<Image src={logo} avatar/>
<Image src={logo} size='mini'/>
</div>
</div>
);
}
}
export default App;
The result shows me 2 big react {logo} images, not mini or avatar styled:
Ideas of what I´m missing here ?
Semantic UI React requires a Semantic UI' CSS, you forgot to setup it, here is instuctions. We will also add an example setup with CRA soon.
You might have found your answer already, but not seeing it here, so adding solution for the same error I got while using Image component with svg icon
import { Image } from 'semantic-ui-react';
import { ReactComponent as Logo } from './logo.svg';
<div className="ui container">
<h1>Hello World</h1>
<Image as={Logo} title="logo" avatar />
</div>
Hope this helps some one!