0

I am creating a react app and getting all data from API calls. I have set data into an array and display them. And there is data coming with img tag and need to set image path for that img tag.

My data set is like below.

qtemp3: [
  {
    idappcontent: "Sign_01",
    content:
      '<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;">',
  },
  {
    idappcontent: "Sign_02",
    content:
      "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday and anniversary, we'll add you to our exclusive email database. You'll then be entitled to receive valuable offers each month and on those special occasions.</div>",
  },
  {
    idappcontent: "Sign_03",
    content:
      ' <div style="text-align:center"> <label for="firstName">First Name</label></div><div style="margin-top: 3%;"><input id="fname" name="firstName" onkeyup="FirstnameValidation()" style="font-family: trajanPro;width:100%;text-transform: capitalize;border-color: rgb(224, 94, 7);" /> </div>',
  },
  {
    idappcontent: "Sign_04",
    content:
      '<div style="text-align:center"> <label for="lname">Last Name</label> </div><div style="margin-top: 3%;"><input id="lname" name="lname" style="font-family: trajanPro;width:100%;text-transform: capitalize;" /></div>',
  },
  {
    idappcontent: "Sign_05",
    content:
      ' <div style="text-align:center"><label for="email">Email Address</label></div><div style="margin-top: 1%;"><input id="email" type="email" name="email" onkeyup="emailvalidation()"  style="width:100%;border-color: rgb(224, 94, 7);" /></div>',
  },
  {
    idappcontent: "Sign_06",
    content:
      '<div id="birthdayHeader"><label>Birthday</label></div><div style="display: inline-table; margin-top: 8px; width: 100%;"><div style="display: inline-block; width: 50%; text-align: right"><label for="birthdayMonth">(Month)</label><input id="birthdayMonth" type="number" min="0" max="12" onkeyup = "birthdayMonthValidate()"  name="birthdayMonth" style="width:45px"></div><div style="display:inline-block;width:50%;text-align:left"><input id="birthdayDay" type="number" min="0" max="31" name="birthdayDay" onkeyup = "birthdayValidate()" style="width:45px"><label for="birthdayDay">(Day)</label></div></div></div>',
  },
],

This is what I tried;

import React, { Component } from "react";
import fullStarSrc from "../img/highlightedStar.png";
import emptyStarSrc from "../img/star.png";

export default class testPage3 extends Component {
  state = {
    surveyContent: [],
    qtemp3: [
      {
        idappcontent: "Sign_01",
        content:
          '<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;">',
      },
      {
        idappcontent: "Sign_02",
        content:
          "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday and anniversary, we'll add you to our exclusive email database. You'll then be entitled to receive valuable offers each month and on those special occasions.</div>",
      },
      {
        idappcontent: "Sign_03",
        content:
          ' <div style="text-align:center"> <label for="firstName">First Name</label></div><div style="margin-top: 3%;"><input id="fname" name="firstName" onkeyup="FirstnameValidation()" style="font-family: trajanPro;width:100%;text-transform: capitalize;border-color: rgb(224, 94, 7);" /> </div>',
      },
      {
        idappcontent: "Sign_04",
        content:
          '<div style="text-align:center"> <label for="lname">Last Name</label> </div><div style="margin-top: 3%;"><input id="lname" name="lname" style="font-family: trajanPro;width:100%;text-transform: capitalize;" /></div>',
      },
      {
        idappcontent: "Sign_05",
        content:
          ' <div style="text-align:center"><label for="email">Email Address</label></div><div style="margin-top: 1%;"><input id="email" type="email" name="email" onkeyup="emailvalidation()"  style="width:100%;border-color: rgb(224, 94, 7);" /></div>',
      },
      {
        idappcontent: "Sign_06",
        content:
          '<div id="birthdayHeader"><label>Birthday</label></div><div style="display: inline-table; margin-top: 8px; width: 100%;"><div style="display: inline-block; width: 50%; text-align: right"><label for="birthdayMonth">(Month)</label><input id="birthdayMonth" type="number" min="0" max="12" onkeyup = "birthdayMonthValidate()"  name="birthdayMonth" style="width:45px"></div><div style="display:inline-block;width:50%;text-align:left"><input id="birthdayDay" type="number" min="0" max="31" name="birthdayDay" onkeyup = "birthdayValidate()" style="width:45px"><label for="birthdayDay">(Day)</label></div></div></div>',
      },
    ],
  };

  

  render() {
    const { qtemp3} = this.state;
    return qtemp3.map((item, index) => (
     <div key={item.idappcontent}>
       <div dangerouslySetInnerHTML={{ __html: item.content }} />
     </div>
   ));
  }
}

Now I need to display the image. All the images are inside the img folder inside the src folder. How Can I set an Image path for <img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;"> ?

And also need to create a function to make validation for each input field. How to call these function? onkeyup="FirstnameValidation()" , onkeyup="emailvalidation()"

Sidath
  • 379
  • 1
  • 9
  • 25

1 Answers1

0

To render images we need to either import the image at the top or use require when we have dynamic imports. And in your case your setting the elements using innerHtml. So first you need to change the src of your tag and then use require() like this. You can change the imagePath value as per your location

  renderImg = ({content}) => {
    const imgPath = "./";
    var imgContent= content.replace("#FOLDERPATH#", imgPath);
    var regex = /<img.*?src="(.*?)"/;
    var src = regex.exec(imgContent)[1];
    var imgSrc = require(src);
    imgContent= imgContent.replace(src, imgSrc);
    return <div dangerouslySetInnerHTML={{ __html: imgContent }} />
  }
  

  render() {
    const { qtemp3} = this.state;
    return qtemp3.map((item, index) => (
     <div key={item.idappcontent}>
       {item.content.startsWith('<img') ? 
        this.renderImg(item)
       : <div dangerouslySetInnerHTML={{ __html: item.content }} />
      }
     </div>
   ));
  }
Neel Dsouza
  • 1,342
  • 4
  • 15
  • 33