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"} />
Related
I have a JS file; Cards.js which implements a card-style div:
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div classNam="cards">
<ul className="cards__items">
<CardItem
src={require("../images/img-9.jpg").default}
text="text"
label="label"
path="/jobs"
/>
</ul>
</div>
);
}
export default Cards;
And then CardItem.js:
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<div>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap"
data-category={props.label}>
<img
src={props.src}
className="card__item__img"
alt="alt"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text} </h5>
</div>
</Link>
</li>
</div>
);
}
export default CardItem;
However, on my site, the images from CardItem are not displayed. The Text, Label and Path all work, but no image.
I've looked around and have seen different solutions to this issue but none have worked for me.
I've tried using
src="../images/img-9.jpg"
instead of using require but that also didn't work.
What's weird is I can see the path AND the preview of the image when looking at the Chrome inspection panel, but they won't load.
I've also tried putting the images folder in the Public directory which is another solution I've seen, but I get an error saying something about loading resources outside of /src
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" />
I am trying to add images dynamically from the assets folder in my react component. This is the code that I have:
import React from 'react';
const card = (props) => {
const image = require.context(
`../../assets/imgs`,
true,
new RegExp(`(${props.vnum}_${props.snum}.png)$`)
);
return (
<div>
<img src={image} alt="image" />
<p>{props.english}</p>
<p>{props.french}</p>
</div>
);
};
When I do this, I get the following error:
TypeError: webpack_require(...).context is not a function
I used CRA and looking up past posts I see that this should work. Where am I going wrong?
This should be enough.
import React from 'react';
const Card = (props) => {
return (
<div>
<img alt="image" src={require(`../../assets/imgs/${props.vnum}_${props.snum}.png`} />
<p>{props.english}</p>
<p>{props.french}</p>
</div>
);
};
It's necessary to use it in those convention?
The simpler solution without require.context()
import React from 'react';
import Image from "../../assets/img/english
import Image from "../../assets/img/french
const card = (props) => {
return (
<div>
<img src={english} alt="image" />
<p>{props.english}</p>
<img src={french} alt="image" />
<p>{props.french}</p>
</div>
);
};
Also:
It's possible to add some conditional rendering here (depends on variable render english or french) - i'm not sure You need it.
require.context is a special feature supported by webpack's compiler that allows you to get all matching modules starting from some base directory. The intention is to tell webpack at compile time to transform that expression into a dynamic list of all the possible matching module requests that it can resolve, in turn adding them as build dependencies and allowing you to require them at runtime.
So if regex matches more than 1 element - mapping is needed - however i think in this specific issue import is enough.
you can use simply require()
import React from "react";
import "./styles.css";
import Card from "./card";
export default function App() {
return (
<div className="App">
<h1>Hello</h1>
<h2>check this!</h2>
<Card vnum={12} snum={13} english={"english"} />
</div>
);
}
card.js
import React from "react";
export default function card(props) {
const image = require(`./img/${props.vnum}_${props.snum}.jpg`);
return (
<div>
<img src={image} alt="image1" width="200px" />
<p>{props.english}</p>
</div>
);
}
you can check this at here https://codesandbox.io/s/elegant-ramanujan-5qwcp
This is not the exact anser for your question, but might help you in later scenes maybe you may already know about this. If you have got URL's of the image that can be grabbed from internet, then you can save them into an array. Eg: const array = ['url1', 'url2',....etc]
Then use : array.map(url => { <img src={url} /> })
Also if you are pulling from an API use the same method.
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'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