在 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()是如何工作的）。