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=" " />

No comments:

Post a Comment

Popular Posts