在 React 中使用危险设置的 innerhtml parent 属性更改 child 的图像源 属性

Question

我有一个前端应用程序，它使用 react 并使用来自 strapi 后端的 API 调用来获取数据。 我在 strapi 后端为用户提供了一个富文本字段，用户还可以在其中上传图像和数据，如图所示 Strapi Backend。
在反应方面，我在 axios 的帮助下使用 API 调用获取数据并显示数据，如代码

所示

 const [data, setData] = useState({});
    useEffect(() => {
    callApi(the_get_data_url); // Calls the API and sets state using setData so now data field 
    //has all the data
     }, []);

这是数据变量将包含的示例。

{
  "Subscription": "standard",
  "_id": "610bc1265aeb5e38e42c8220",
  "Headline": "How to stop screwing yourself over",
  "Description": "<p>How do you get on the road to being happier? Start by setting your alarm for 30 minutes earlier than usual and not hitting the snooze button. The effort required to leave that warm bed and enter the world is the same amount of effort needed to shake up your life and make that elusive change. In this humorous and provocative talk, Mel Robbins explains how turning off our brain's autopilot and demolishing our comfort zones is key to a rewarding life.</p><p><img src=\"/uploads/photo_1483985988355_763728e1935b_ixid_Mnwx_Mj_A3f_DB_8_M_Hxz_ZW_Fy_Y2h8_M_Xx8_Zm_Fza_Glvbnxlbnwwf_Hwwf_Hw_3_D_and_ixlib_rb_1_2_5186b4137a.1&amp;w=1000&amp;q=80\" alt=\"\"></p>",
  "published_at": "2021-08-05T13:06:47.325Z"
}

如您所见，Description 字段包含 HTML 标签以及图像 tags.So 我在前端所做的显示此数据的反应是

<div id="description" dangerouslySetInnerHTML={{ __html: data?.Description }}></div>

现在的问题是图片没有来，因为它的来源不完全正确。

<img src="/uploads/photo_1483985988355_763728e1935b_ixid_Mnwx_Mj_A3f_DB_8_M_Hxz_ZW_Fy_Y2h8_M_Xx8_Zm_Fza_Glvbnxlbnwwf_Hwwf_Hw_3_D_and_ixlib_rb_1_2_5186b4137a.1&amp"/>

正确的源在开发环境"http://localhost:1337/"+源来自strapi 或用于生产环境 process.env.React_BACKEND_URL + 来自 strapi 的来源 我已经包括 Jquery 用于更改图像的来源 $("#description").find('img').attr('src') 但我无法继续进行下去。任何人都可以帮助我如何正确更新源 属性。我还尝试了以下功能

import $ from "jquery";
window.onload = function () {
  setTimeout(CorrectURL, 3000);
};
function CorrectURL() {
  var images = [];

  images = $("#description p img").each(() => {
    var $img = $(this);
    console.log("The source is" + $img.attr("src")); // Getting undefined here
    return $img.attr("src");
  });

  window.images = images;
}

Answer 1

你应该忘记 jQuery，尤其是在 React.js 组件中。您可以在这里简单地使用 replaceAll，如下所示：

let data = {
  "Subscription": "standard",
  "_id": "610bc1265aeb5e38e42c8220",
  "Headline": "How to stop screwing yourself over",
  "Description": "<p>How do you get on the road to being happier? Start by setting your alarm for 30 minutes earlier than usual and not hitting the snooze button. The effort required to leave that warm bed and enter the world is the same amount of effort needed to shake up your life and make that elusive change. In this humorous and provocative talk, Mel Robbins explains how turning off our brain's autopilot and demolishing our comfort zones is key to a rewarding life.</p><p><img src=\"/uploads/photo_1483985988355_763728e1935b_ixid_Mnwx_Mj_A3f_DB_8_M_Hxz_ZW_Fy_Y2h8_M_Xx8_Zm_Fza_Glvbnxlbnwwf_Hwwf_Hw_3_D_and_ixlib_rb_1_2_5186b4137a.1&amp;w=1000&amp;q=80\" alt=\"\"></p><p>Yet another image for fun <img src=\"/uploads/photo_1483985988355_763728e1935b_ixid_Mnwx_Mj_A3f_DB_8_M_Hxz_ZW_Fy_Y2h8_M_Xx8_Zm_Fza_Glvbnxlbnwwf_Hwwf_Hw_3_D_and_ixlib_rb_1_2_5186b4137a.1&amp;w=1000&amp;q=80\" alt=\"\"></p>",
  "published_at": "2021-08-05T13:06:47.325Z"
}

function addHost(str, host) {
  return str.replaceAll('src=\"/uploads', `src=\"${host}/uploads`)
}

console.log(addHost(data.Description, 'https://images.example.com'))

或通过添加主机再次split the Description at the uploads substring to an array and join他们：

let data = {
  "Subscription": "standard",
  "_id": "610bc1265aeb5e38e42c8220",
  "Headline": "How to stop screwing yourself over",
  "Description": "<p>How do you get on the road to being happier? Start by setting your alarm for 30 minutes earlier than usual and not hitting the snooze button. The effort required to leave that warm bed and enter the world is the same amount of effort needed to shake up your life and make that elusive change. In this humorous and provocative talk, Mel Robbins explains how turning off our brain's autopilot and demolishing our comfort zones is key to a rewarding life.</p><p><img src=\"/uploads/photo_1483985988355_763728e1935b_ixid_Mnwx_Mj_A3f_DB_8_M_Hxz_ZW_Fy_Y2h8_M_Xx8_Zm_Fza_Glvbnxlbnwwf_Hwwf_Hw_3_D_and_ixlib_rb_1_2_5186b4137a.1&amp;w=1000&amp;q=80\" alt=\"\"></p><p>Yet another image for fun <img src=\"/uploads/photo_1483985988355_763728e1935b_ixid_Mnwx_Mj_A3f_DB_8_M_Hxz_ZW_Fy_Y2h8_M_Xx8_Zm_Fza_Glvbnxlbnwwf_Hwwf_Hw_3_D_and_ixlib_rb_1_2_5186b4137a.1&amp;w=1000&amp;q=80\" alt=\"\"></p>",
  "published_at": "2021-08-05T13:06:47.325Z"
}

function addHost(str, host) {
  return str.split('src=\"/uploads').join(`src=\"${host}/uploads`)
}

console.log(addHost(data.Description, 'https://images.example.com'))

我可能会将主机添加到 useEffect 挂钩中的 Description 属性（尽管我不确定您的 callApi() 是如何工作的）。