在 React 中使用危险设置的 innerhtml 父属性更改子项的图像源属性

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 标签以及图像标签。所以我在前端做的反应是显示此数据

<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')但我无法继续进行下去。 任何人都可以帮助我如何正确更新源属性。 我也试过以下 function

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'))

或者将uploads substring 处的Description split为一个数组，然后通过添加主机再次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()是如何工作的）。