Display Images in React Using Jsx Without Import

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



Leave a reply



Submit