Help me to solve React js Import image issue the image is not working I try too many times console log error images and folder structure.
If I put direct server URL the images is visible
import React, {Component} from 'react';
import '../assets/css/bootstrap.css';
import '../assets/css/home.css';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import logo from '../assets/img/donut-logo.jpg';
class Home extends Component {
render() {
return (
<main>
<div className="container-fluid mainheader">
<div className="container mainheader-wrapper">
<img src="{logo}" />
</div>
</div>
<div className="container mainheader-btn">
<div className="col-md-6">
<a href={FlowRouter.url('login')}>Login</a>
</div>
<div className="col-md-6">
<a href={FlowRouter.url('register')}>Register</a>
</div>
</div>
</main>
)
}
}
Home.propTypes = {};
Home.defaultProps = {};
export default Home;
[![enter image description here][3]][3]
[![enter image description here][1]][1]
[![enter image description here][2]][2]
[1]: https://i.stack.imgur.com/onDQu.png
[2]: https://i.stack.imgur.com/ripwM.png
[3]: https://i.stack.imgur.com/E9TEP.png
Are you using web pack for bundling.
If you used then please follow the below thing.
Add url-loader in the config file of your webpack as follows.
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
options: {
mimetype: 'image/png'
}
}
Seems like you are using Meteor with ReactJS.
Try to create a public folder in the root directory (same level as client, server, import), place your image in the public folder and then try to import it.
Related
I am getting a message "no internet" meaning my image has an error but I don't know how to rectify it. The code is as shown below:
import React from 'react';
import './Footer.css'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={require('../../../assets/Home/shape-bg.png').default} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
There are two ways how to display images in React:
import React from 'react';
import './Footer.css'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={require('../../../assets/Home/shape-bg.png')} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
I don't get your ".default".. Or just do it that way:
import React from 'react';
import './Footer.css'
import image from '../../../assets/Home/shape-bg.png'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={image} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
Here I just imported that image on top of that file and paste that image into <image src />.
I just want to ask how to properly import images and videos in nextjs? My images doesn't load on nested route page, like this -> localhost:3000/about/missionVision It works on single path though, like this -> localhost:3000/about
This is the code of the component with image that doesn't load on nested route/page.
import React, { Fragment } from "react";
const Banner= () => {
return(
<Fragment>
<header className="banner">
<div className="container">
<div className="logo">
<img src="./images/logo.png" alt="our logo"/>
</div>
</div>
</header>
</Fragment>
)
}
export default Banner;
I used to use this format of importing, but there's always an error when I imported videos/mp4 files, plus image doesn't show. ( I migrated cra to next)
import React, { Fragment } from "react";
import logo from "./../../public/images/logo.png";
const Banner= () => {
return(
<Fragment>
<header className="banner">
<div className="container">
<div className="logo">
<img src={ logo }/>
</div>
</div>
</header>
</Fragment>
)
}
export default Banner;
This is my file structure
root folder
components
Banner
-index.js
page
public
images
videos
Thank you!
Edit: This is the error that shows whenever I try to import a video.
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
No Need for import public path just try to access from the public path.
<img src={"/images/xyz.svg"} />
I am trying to convert a basic success page design from figma to reactcode using anima.
import React from "react";
function success() {
return (
<Frame1
ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2#2x.svg"
ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1#2x.svg"
maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group#2x.svg"
great="Great!"
text1="Your payment was successfull"
place="Okay"
/>
);
}
export default success;
function Frame1(props) {
const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;
return (
<div className="frame-1">
<div className="overlap-group1">
<img className="ellipse-2" src={ellipse2} />
<img className="ellipse-1" src={ellipse1} />
<div className="typcntick smart-layers-pointers ">
<img className="mask-group" src={maskGroup} />
</div>
<h1 className="great avenirnext-medium-black-48px">{great}</h1>
</div>
<div className="text-1 avenirnext-medium-black-24px">{text1}</div>
<div className="overlap-group">
<Rectangle1 />
<div className="place avenirnext-demi-bold-white-36px">{place}</div>
</div>
</div>
);
}
function Rectangle1() {
return <div className="rectangle-1 smart-layers-pointers "></div>;
}
I have copied the jsx and css files from anima and now I am trying to import that into my app.
But I am unable to display it on my app. How can I resolve this?
import React from 'react';
import './success.css';
import success from './success';
const App = () => {
return (
<div>
<success/>
</div>
);
}
export default App;
I checked the react code and it works for me, maybe there's something basic that is not setup correctly. First thing is to try and see if your react code shows a simple hello world text.
I see that you are using anima to import figma and export react code. If you manage to get it work that's great, if not I recommend trying Desech Studio and see if that works for you.
It imports Figma with relative html/css positioning and it exports react code. Here's the github repo for more details.
The success component you imported and exported should start with a capital letter like Success then only react understands that its a component
Am using airtable.com helloworld sample code. my logo.jpg is in the same directory as the index.js files
myproject-folder\frontend\index.js
myproject-folder\frontend\logo.png
The airtable app is not using webpack so I could not import the logo image.
I have tried calling the image directly as per code
below but could not get it to work.
<img src={window.location.origin + './logo.jpg'} />
<img src={'./logo.jpg'} />
here is the code
import {
initializeBlock,
useBase,
useRecords,
} from '#airtable/blocks/ui';
import React, { Component } from "react";
class App extends Component {
render() {
return (
<div>
<h2>Hello world from Airtable</h2>
<img src={'./logo.jpg'} />
</p>
</div>
);
}
}
export default App;
If I understand correctly you are using webpack to build your app.
Webpack treat assets as dependencies. As such, you need to import your image and use an appropriate loader to handle the file type of your logo.
From webpack's documentation:
[...] When you import MyImage from './my-image.png', that image will
be processed and added to your output directory and the MyImage
variable will contain the final url of that image after processing.
[...] The loader will recognize this is a local file, and replace the
'./my-image.png' path with the final path to the image in your output
directory.
In your case, you could do this:
import React, { Component } from "react";
import {
initializeBlock,
useBase,
useRecords,
} from '#airtable/blocks/ui';
import logo from './logo.png';
class App extends Component {
render() {
return (
<div>
<h2>Hello world from Airtable</h2>
<img src={logo} />
</div>
);
}
}
export default App;
You'd then need to add the file-loader to your webpack config file:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
I am just starting a new React project but I am having trouble importing a particular file, which is located in a seperate folder named 'Components', into my app.js file.
Please have a look below at the code I am using to import.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Category from './Components/Category.js';
import './App.css';
And here is the barely developed Category component, if its of any use in providing a sulution?
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;
And here is the error message react is providing me with
you need to import React everywhere where you are using JSX. it is important because all JSX elements get transpiled to React.createElement. so React must always be in scope.
import React from 'react' // add this line
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;