React-create-library Import Image Issue - javascript

I am creating new project using create-react-library but when I tried to import image using import logo from './logo.png', the image does not show up in the example, but if I use import logo from 'logo.png' the image show up.
My question is this normally happen?
here is the folder structure of my project
not working version
result
code:
import React from 'react'
import styles from './styles.module.css'
import logo from './logo.png'
export const ExampleComponent = ({ text }) => {
return (
<div className={styles.test}>
{/* Example Component: {text} */}
<img src={logo} />
</div>
)
}
working version
result
code:
import React from 'react'
import styles from './styles.module.css'
import logo from 'logo.png'
export const ExampleComponent = ({ text }) => {
return (
<div className={styles.test}>
{/* Example Component: {text} */}
<img src={logo} />
</div>
)
}

Hi I am also new with react-create-library and was having the same problem. My image was in the folder src/assets/img and when I was trying to add the path relatively it was failing.
What i found is path should be after the ./src/ folder.
following is the code that worked for me for the icon in src/assets/img folder.
import * as React from 'react';
import styles from './styles.module.css';
import warnicon from 'assets/img/warning.png';
.
.
.
<div className={styles.modalBody}>
<img src={warnicon} alt='warn-icon'></img>
<p className={styles.warning}>{props.text}</p>
</div>
Thank you.

yes it is normally the way it happens. Although adding your code would have helped but I have added an example:-
import React from 'react';
import logo from './logo.png';
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}

Related

Combine an uploaded image and a draggable text and download it together in react

I am new to react and js. Is there any way that I can upload an image and move the draggable text on top of that image and when I click download the image along with the download get saved?? Any help is much appreciated.
My App.js
import './App.css';
import Land from './Land';
import React from 'react';
import Draggable from 'react-draggable';
import { saveAs } from 'file-saver'
function App() {
const [file, setFile] = React.useState();
function handleChange(e) {
console.log(e.target.files);
setFile(URL.createObjectURL(e.target.files[0]));
}
const downloadImage = () => {
saveAs(file, 'image.jpg') // Put your image url here.
}
return (
<div className="App">
<h2>Add Image:</h2>
<input type="file" onChange={handleChange} />
<div className='img-container'>
<Land/>
<img src={file} width ="100%"/>
<button onClick={downloadImage}>Download!</button>
</div>
</div>
);
}
export default App;
My Land.js
import React from 'react';
import Navbar from './Navbar';
import Hero from './Hero';
import pic from './me.png'
import Draggable from 'react-draggable';
export default function Land()
{
return(
<div>
<Draggable>
<div>I can now be moved around!</div>
</Draggable>
</div>
)
}
Screenshot of landing page

Image is not rendering in the DOM while passing as props in the App.js file?

I am passing the image name as props in the instance of the Card component in App.js. Then I am receiving it from the Card component and render it to the DOM. But my image is not showing in the DOM. What could be the reason?
This is my App.js
import React from "react";
import "./style.css";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import Card from "./components/Card";
import "./images/image12.png";
import "./images/Star1.png";
function App() {
return (
<div className="App">
<Navbar />
<Hero />
<Card
img="image12.png"
star="Star1.png"
obtainedRating={5.0}
TotalRating="6-USA"
briefText="Life lessons with Katie Zaferes"
price="$136"
person="/person"
/>
</div>
);
}
export default App;
Here is my Card component
import React from "react";
import "../style.css";
import "../images/image12.png";
import "../images/Star1.png";
export default function Card(props) {
console.log(props);
return (
<div className="card--section">
<img src={`../images/${props.img}`} className="card--image" alt="Katie" />
<div className="rating">
<img
src={`../images/${props.star}`}
className="star--image"
alt="star"
/>
<small>
{props.obtainedRating} <span>{props.totalRating}</span>
</small>
</div>
<p className="brief-text">{props.briefText}</p>
<p className="price">
<strong>{props.price}</strong>
{props.person}
</p>
</div>
);
}
This is my Folder structure
src
-components
-Card.js
-images
-image12.png
-Star1.png
-App.js
-index.js
This is not working because you need to import an image like this and then put imageName as the value of src attribute. You can give any name you like.
import imageName from "../images/image12.png";
src={imageName}
Import images like:
import img12 from '../images/image12.png'
import star1 from './images/Star1.png'
The image path can retrieved by using the import statement
like below
import "./styles.css";
import clouds from "./Images/clouds.jpeg";
import CardImage from "./CardImage";
export default function App() {
console.log("cloud path", clouds);
return (
<div className="App">
<CardImage path={clouds} alt="clouds" />
</div>
);
}
I have found the solution.I simply imported
import cardImage from "./images/image12.png"
import star from "./images/Star1.png"
And used them in App.js
<Card img={cardImage} star={star}/>

Image Source (src) when passed to Reusable-Component does not show image in UI

I have added an image in the public folder of React-Project. Now, when I want to show an image - it gets showed up in a component, but if I try to pass its url and show the image in some reusable component - I find that image is not shown in UI.
Can someone help me out?
Home.js
import React, { Component } from 'react';
import Cards from './cards';
class Home1 extends Component {
render(){
return(
<div>
<img src="img/aishwarya.jpg" />
<Cards title="Aishwarya" sourcelink="img/aishwarya.png" details="Miss World 1994" />
</div>
)
}
}
export default Home1;
Cards.js
import React from 'react';
import './cards.css';
const Cards = (props) => {
return (
<div className="cardHolder">
<div className="imageHolder">
<img src={props.sourcelink} />
</div>
<div className="contentHolder">
<h3>{props.title}</h3>
<p>{props.details}</p>
</div>
</div>
);
}
export default Cards;
Output:
When using webpack, for images under src, a path like img/aishwarya.jpg is only available during build time.
You need to import it, see Adding Images, Fonts, and Files:
import image from "./img/aishwarya.jpg";
console.log(image) // /aishwarya.84287d09.jpg
<img src={image} />
<img src={require("img/aishwarya.jpg")} />
See working example:

React: Component Structure, is it out of context for use?

I am starting a React Project. I am trying to construct the message board page and I have Components for the Left, Center, and Right Portion of the page. The Center is where the user posts will go. Left and Right are News, Events.. etc.
My file structure is as follows:
--client
----Public
------|index.html
--------src
----------components
-----------Center
------------|CenterForm.js
------------|Post.js
-----------Left
-------------|LatestNews.js
-------------|LeftForm.js
-------------|Trending.js
-------------|WatchList.js
-----------Whole
-------------|WholeComponent.js
Ultimately, I wanted to construct each piece then combine them in the whole component so that row and columns would be smooth.
I get this error: ./src/components/Whole/WholeComponent.js
Module not found: Can't resolve './components/Center/CenterForm' in '/Users/edwarddeleon/Desktop/ct-app/client/src/components/Whole'
and for the Left when I remove the center section.
CenterForm Component:
import React from 'react';
import Post from './Post';
const CenterForm = () =>
<div className="col 4">
<Post />
</div>
export default CenterForm;
Post Component(will be changed when I go to implement user comment function):
import React from 'react';
const Post = () =>
<div className="posthere">
<span>post will be here</span>
</div>
export default Post;
Whole Component:
import React from 'react';
import LeftForm from './components/Left/LeftForm';
import CenterForm from './components/Center/CenterForm';
const WholeComponent = () =>
<div className="container">
<div className="row">
<LeftForm />
<CenterForm />
</div>
</div>
export default WholeComponent;
App.js:
import React, { Component } from 'react';
import Nav from "./components/Nav";
import WholeComponent from './components/Whole/WholeComponent';
class App extends Component {
render() {
return (
<div className="App">
<Nav />
<WholeComponent />
</div>
);
}
}
export default App;
Thank you Community!
You have false path for the component.
Your import in the WholeComponent should be like this
import LeftForm from '../Left/LeftForm';
import CenterForm from '../Center/CenterForm';
Because, you need to backward the directory where Center and Left component are placed.

React Js: mountNode is not defined no-undef error

I am newly learning the React Js. I found the example at this Link. But when I tried the first code:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);
export default HelloMessage;
I am getting this error
./src/App.js Line 18: 'mountNode' is not defined no-undef
Search for the keywords to learn more about each error.
I have already seen the answer at this StackOverflow link. But I'm sorry I couldn't get what is explained there. Provide me the suggestions. Thank you in advance!
The error message you are getting is a linting error. (static code analysis)
Make sure your mountNode variable exists.
or use something like:
render(<HelloMessage />, document.getElementById('app'));
Also make sure that you have a DOM element with id app in your HTML code:
for example:
<div id="app" />
The ReactDOM.render() method is already located under
src/index.js
like:
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
The above code renders over component in the root div located in the public/index.html
src/App.js
--->initially it looked like:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Finally --> Now instead of rendering the App Component...we can either write the HelloMessage component under the same file or replace the App Component with something like this..
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div>
Hello {this.props.name}
</div>
</div>
);
}
}
After that I'm able to see the Hello Message in the browser localhost:3000. But the Name Taylor is not displayed there...So what I did is passed the name props from the index.js file something like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//Passed the name props to the
ReactDOM.render(<App name = "Taylor"/>, document.getElementById('root'));
registerServiceWorker();
Now After this point I got the successful output Hello Taylor. If you are replacing the App component with HelloMessage component, don't forget to import that file in the index.js

Categories