Изменение свойства источника изображения дочернего элемента с опасно установленным родительским атрибутом innerhtml в React

Question

У меня есть интерфейсное приложение, которое использует реакцию и извлекает данные с помощью вызовов API для бэкэнда strapi. Я предоставил пользователю поле с форматированным текстом в серверной части strapi, где он также может загрузить изображение вместе с данными, как показано в Strapi Backend.
На стороне реакции я получаю данные с помощью вызова API с помощью axios и отображаю данные, как показано в коде.

       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')но я не могу идти дальше этого. Может ли кто-нибудь помочь мне, как правильно обновить исходное свойство.

Answer 1

Вам следует просто забыть о jQuery, особенно в компоненте React.js. Вы можете просто использоватьreplaceAll вот так:

Я бы, наверное, добавил хост в Description собственность в useEffect крючок (хотя я не уверен, как ваш callApi() работает).