从react js中的数组数据获取Img标签时如何设置图像路径？

Question

我正在创建一个反应应用程序并从 API 调用中获取所有数据。我已将数据设置为数组并显示它们。并且img标签有数据，需要为该img标签设置图片路径。

我的数据集如下。

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>',
  },
],

这是我尝试过的；

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>
   ));
  }
}

现在我需要显示图像。所有图像都在 src 文件夹内的 img 文件夹内。如何为<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;"> 设置图片路径？

并且还需要创建一个函数来对每个输入字段进行验证。如何调用这些函数？ onkeyup="FirstnameValidation()" , onkeyup="emailvalidation()"

Answer 1

要渲染图像，我们需要在顶部导入图像，或者在动态导入时使用require。在您的情况下，您使用innerHtml 设置元素。因此，首先您需要更改标签的 src，然后像这样使用require()。您可以根据您的位置更改imagePath 值

  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>
   ));
  }