Display images in React using JSX without import
require
is used for static "imports", so you just need to change your imports
.
Example:
var imageName = require('./images/image1.jpg')
<img src={imageName} />
Display an image from url in ReactJS
As you do in HTML
import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<img
src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
alt="new"
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Displaying Images in React
There is no JSX tag called image
exists.
Replace image
with img
<img
src={images[currentImageIndex]}
/>
Short syntax for using local image in React without webpack?
You could put them all in the public folder and access them that way if you don't want to use web pack.
As far as I know, there is not shorter way than the method you mentioned to import images, of course you can use web pack as well and once that's set up you can reference it.
As a side note this is from the React docs on usage of the public folder:
- You have thousands of images and need to dynamically reference their paths.
You can read more about it here: https://facebook.github.io/create-react-app/docs/using-the-public-folder
React won't load local images
When using Webpack you need to require
images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} />
you need to use <img src={require('/images/image-name.png')} />
replacing image-name.png with the correct image name for each of them. That way Webpack is able to process and replace the source img.
Related Topics
React Button Onclick Redirect Page
How to Render a Word Document (.Doc, .Docx) in the Browser Using JavaScript
Moment Js Get First and Last Day of Current Month
How to Loop Through Json Array and Get Specific Values
React-Router Urls Don't Work When Refreshing or Writing Manually
How to Pass Model Data in JavaScript
How to Get Date Value from One Date Input Field and Put It to Other Date Field Using JavaScript
How to Open a Url Link from JavaScript Inside a Google Apps Script HTML Google Site Gadget
Open Html5 Date Picker on Icon Click
Make an Angular *Ngfor Draw Two Different Columns of Data
How to Show Which Question a User Is on When Taking My Quiz
Localstorage Values Get Reset After Refreshing Page and Inserting New Values
Instead of Downloading, Files Are Opening in Browser
Postman: How to Check Whether the Field Is Returning Null in the Postman Automation
How to Clear Browsing History Using JavaScript
Display Images in React Using Jsx Without Import
How to Submit an HTML Form Without Redirection
Check If Current Time Is Between Two Given Times in JavaScript