1

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

1 回答 1

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将Descriptionatuploads子字符串添加到数组中，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'))

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

于 2021-08-11T15:25:04.647 回答