Showing posts with label Dynamically load Image file in ReactJS. Show all posts
Showing posts with label Dynamically load Image file in ReactJS. Show all posts

Saturday, March 7, 2020

Dynamically load Image file in ReactJS

Import React and CardImage:

import React, { Component } from 'react';
import {CardImg} from 'reactstrap';


Import the Image File during Pageload:

import imgFile from "./images/ItemImage.jpg";


Fetch Item Image dyncamically from Database:

var itemImage =  Item.ImageLocation;
var loadImage = require(itemImage + '');


Assign Image in CardImg tag to Show the Image while Render HTML:

<CardImg src={loadImage} alt=" " />


Assign Image in IMG  tag to Show the Image while Render HTML:

<img src={loadImage} alt=" " />

Popular Posts