在 React 中更改具有危险设置的 innerhtml 父属性的孩子的图像源属性

Posted 2023-03-16

【中文标题】在 React 中更改具有危险设置的 innerhtml 父属性的孩子的图像源属性

【英文标题】：Changing image source property of a child with dangerously set innerhtml parent attribute in React

【发布时间】：2021-10-12 10:15:14

【问题描述】：

我有一个前端应用程序，它使用 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"

如您所见，描述字段包含 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') 但我无法继续进行。谁能帮助我如何正确更新源属性。我也试过以下功能

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;

【问题讨论】：

嘿 Ansh Kapoor，我试图在下面为您提供答案。你有机会去看看吗？有意义吗？如果回答有用，请点击其左侧的点赞按钮（▲）。如果它回答了您的问题，请单击复选标记 (✓) 接受它。这样其他人就知道该解决方案有效。另外，请参阅What should I do when someone answers my question? 谢谢 :)

答案很有用，但我主要担心的是为什么 Jquery 不能与 react 一起使用。我的意思是 Jquery 也有很多非常有用的插件。我真的很想用一些 JQ 的方式去做。无论如何感谢您的回答

【参考方案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'))

或者splitDescription在uploads子字符串到一个数组和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() 是如何工作的）。