I'm having an issue loading an image locally in my reactjs file. Any help would be awesome. Thanks
Failed to compile
./src/components/pages/home.js
Module not found: Can't resolve '../Assets/images/Thomas-overlay3.jpg' in 'C:\Users\tcmar\Documents\ThomasWebsite\mywebsite\src\components\pages'
This error occurred during the build time and cannot be dismissed.
my code:
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div className="container">
<div className="hero-image">
<img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" />
</div>
<div className="hero-text">
Hello, My Name is <span>Thomas</span>
</div>
</div>
);
}
}
export default Home;
Your assets should go in some public/ folder which is served as is by the server.
Then you can just refer the actual resource:
...
<img src="/assets/my-image.jpg" />
...
Or, you can use webpacks file-loader and load it like:
<img src={require("file-loader!./file.png")} />
However, this will load the file and emit a copy in the public folder automatically, if this is what you want.
more info: https://github.com/webpack-contrib/file-loader
Related
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 unable to load images despite of correct src given can anyone tell silly mistake in it!
I am absolute noobie so what is thing I am doing wrong ? in react img tag <img src={} /> this how i think codes are written in it!
Template.js Code
import React from 'react';
import './Template.css';
function Template () {
return (
<div>
<div className="shape header-shape-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-tow animation-one">
<img src={"./shape2.png"} alt="shape"></img>
</div>
<div className="shape header-shape-three animation-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-fore">
<img src={"./shape4.png"} alt="shape"></img>
</div>
</div>
);
}
export default Template;
App.js Code
import React from 'react';
import NAVBAR from './components/Navbar/navbar';
import Template from './components/shape/Template'
class App extends React.Component
{
render()
{
return (
<div>
<Template />
<NAVBAR />
</div>
);
}
}
export default App;
Create a folder inside the public folder called images and move all your images there. Then, when referencing the path for your images do it like this: <img src="./images/shape1.jpg" alt="shape" />
Setup
I've loaded the Vanilla JS library lightgallery.js through NPM and importing it as normal.
Issue
I'm initializing this library through componentDidMount(), but it's failing to compile because 'lightGallery' is not defined. see sample below
I verified the library is importing by removing componentDidMount() and initializing it through the Chrome Console. When I do this, it works as intended.
I'm not clear on why it's resulting in 'lightGallery' is not defined when the import clearly works when i don't initialize it with componentDidMount(). I'm guessing it's either an issue with the elements not being present in the DOM at load or it's an issue with the way my import is setup.
Any help would be appreciated.
Current Page
This is a stripped down version of my setup with the gallery elements hardcoded for easy explanation.
import React, { Component } from 'react';
import 'lightgallery.js';
class Gallery extends Component {
componentDidMount() {
lightGallery(document.getElementById('lightgallery'));
}
render() {
return (
<>
<section>
<h1>Gallery</h1>
</section>
<section>
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
<a href="img/img3.jpg">
<img src="img/thumb3.jpg" />
</a>
</div>
</section>
</>
);
}
}
export default Gallery;
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.
I am using react js in Adobe experience manager (AEM) I am getting console errors. Here is my code: I am getting
"Uncaught SyntaxError: Unexpected token import"
also I am getting error near
'<' "Unexpected token error"
Can someone please help?
import React from "react";
import {Header} from "./Header";
export class Root extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Header />
</div>
</div>
<hr/>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
{this.props.children}
</div>
</div>
</div>
);
}
}
Consider using react-from-markup where you can declare React components using simple, static markup.
For example, this code:
<div data-react-from-markup-container>
<p class="hello-world">Hello, world!</p>
</div>
becomes:
ReactDOM.render(
React.createElement("p", { className: "hello-world" }, "Hello, world!"),
container
);
Docs: https://simon360.github.io/react-from-markup
ReactJS is not supported on AEM, and is not recommended by Adobe.
Having said that, there are some resources on aem-react, see if these can help:
Vimeo recording: Ben Westrate - ICFI - React.js in AEM on Vimeo
https://vimeo.com/139968905
https://github.com/sinnerschrader/aem-react
https://github.com/sinnerschrader/aem-react-js
https://www.npmjs.com/package/aem-react-js
We were able to use react components by always including a webpack config file with every component.
Every react component then gets transpiled to es5 in our build pipeline.
AEM Clientlibs compile with the transpiled javascripts on render.