title: Can't embed image url from APi
body: <p>I've been following along a coding tutorial that pulls recipe info from an API and displays it on a page.</p>
  <p>Everything was working fine until I stepped away for a bit and came back. Now the image URL from the fetch request won't properly display when I insert the markup onto the page.</p>
  <p>In the console it shows that the entire API fetch request went through and the data is there, but the image won't embed.</p>
  <p>I'm getting this error:</p>
  <pre><code>Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HkcYq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HkcYq.jpg" alt="enter image description here" /></a></p>
  <p>Here is my fetch request and embed code that I'm using:</p>
  <p>Fetch code:</p>
  <pre><code>export const state = {
    recipe: {},
  };
  
  export const loadRecipe = async function (id) {
    try {
      const response = await fetch(
        `https://forkify-api.herokuapp.com/api/v2/recipes/${id}`
        // `https://forkify-api.herokuapp.com/api/v2/recipes/5ed6604591c37cdc054bce57`
      );
      console.log(response);
      const data = await response.json();
      console.log(response, data);
  
      if (!response.ok) throw new Error(`${data.message} (${response.status})`);
  
      const { recipe } = data.data;
  
      console.log(recipe);
  
      state.recipe = {
        id: recipe.id,
        title: recipe.title,
        publisher: recipe.publisher,
        sourceUrl: recipe.source_url,
        servings: recipe.servings,
        image: recipe.image_url,
        cookingTime: recipe.cooking_time,
        ingredients: recipe.ingredients,
      };
      console.log(`--- this is the recipe object ---`);
      console.log(state.recipe);
    } catch (error) {
      alert(error);
    }
  };
  </code></pre>
  <p>Embed Code module:</p>
  <pre><code>class RecipeView {
    #parentElement = document.querySelector('.recipe');
    #data;
  
    render(data) {
      this.#data = data;
      const markup = this.#generateMarkup();
      this.#clear();
      console.log(`=== image link ===`);
      console.log(this.#data.image);
      this.#parentElement.insertAdjacentHTML('afterbegin', markup);
    }
    renderSpinner() {
      const spinnerMarkup = `
        &lt;div class=&quot;spinner&quot;&gt;
          &lt;svg&gt;
            &lt;use href=&quot;${icons}#icon-loader&quot;&gt;&lt;/use&gt;
          &lt;/svg&gt;
        &lt;/div&gt;`;
      this.#clear();
      this.#parentElement.insertAdjacentHTML('afterbegin', spinnerMarkup);
    }
    #clear() {
      this.#parentElement.innerHTML = '';
    }
    #generateMarkup() {
      return `
          &lt;figure class=&quot;recipe__fig&quot;&gt;
          &lt;img src=&quot;${this.#data.image}&quot; alt=&quot;${
        this.#data.title
      }&quot; class=&quot;recipe__img&quot; /&gt;
          &lt;h1 class=&quot;recipe__title&quot;&gt;
              &lt;span&gt;${this.#data.title}&lt;/span&gt;
          &lt;/h1&gt;
          &lt;/figure&gt;
  
          &lt;div class=&quot;recipe__details&quot;&gt;
          &lt;div class=&quot;recipe__info&quot;&gt;
              &lt;svg class=&quot;recipe__info-icon&quot;&gt;
              &lt;use href=&quot;${icons}#icon-clock&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
              &lt;span class=&quot;recipe__info-data recipe__info-data--minutes&quot;&gt;${
                this.#data.cookingTime
              }&lt;/span&gt;
              &lt;span class=&quot;recipe__info-text&quot;&gt;minutes&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class=&quot;recipe__info&quot;&gt;
              &lt;svg class=&quot;recipe__info-icon&quot;&gt;
              &lt;use href=&quot;${icons}#icon-users&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
              &lt;span class=&quot;recipe__info-data recipe__info-data--people&quot;&gt;4&lt;/span&gt;
              &lt;span class=&quot;recipe__info-text&quot;&gt;servings&lt;/span&gt;
  
              &lt;div class=&quot;recipe__info-buttons&quot;&gt;
              &lt;button class=&quot;btn--tiny btn--increase-servings&quot;&gt;
                  &lt;svg&gt;
                  &lt;use href=&quot;${icons}#icon-minus-circle&quot;&gt;&lt;/use&gt;
                  &lt;/svg&gt;
              &lt;/button&gt;
              &lt;button class=&quot;btn--tiny btn--increase-servings&quot;&gt;
                  &lt;svg&gt;
                  &lt;use href=&quot;${icons}#icon-plus-circle&quot;&gt;&lt;/use&gt;
                  &lt;/svg&gt;
              &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;recipe__user-generated&quot;&gt;
              &lt;svg&gt;
              &lt;use href=&quot;${icons}#icon-user&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
          &lt;button class=&quot;btn--round&quot;&gt;
              &lt;svg class=&quot;&quot;&gt;
              &lt;use href=&quot;${icons}#icon-bookmark-fill&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
          &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;recipe__ingredients&quot;&gt;
          &lt;h2 class=&quot;heading--2&quot;&gt;Recipe ingredients&lt;/h2&gt;
          &lt;ul class=&quot;recipe__ingredient-list&quot;&gt;
              ${this.#data.ingredients
                .map(ing =&gt; {
                  return `
              &lt;li class=&quot;recipe__ingredient&quot;&gt;
              &lt;svg class=&quot;recipe__icon&quot;&gt;
                  &lt;use href=&quot;${icons}#icon-check&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
              &lt;div class=&quot;recipe__quantity&quot;&gt;${ing.quantity || ''}&lt;/div&gt;
              &lt;div class=&quot;recipe__description&quot;&gt;
                  &lt;span class=&quot;recipe__unit&quot;&gt;${ing.unit}&lt;/span&gt;
                  ${ing.description}
              &lt;/div&gt;
              &lt;/li&gt;`;
                })
                .join('')}
  
  
              &lt;li class=&quot;recipe__ingredient&quot;&gt;
              &lt;svg class=&quot;recipe__icon&quot;&gt;
                  &lt;use href=&quot;${icons}#icon-check&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
              &lt;div class=&quot;recipe__quantity&quot;&gt;0.5&lt;/div&gt;
              &lt;div class=&quot;recipe__description&quot;&gt;
                  &lt;span class=&quot;recipe__unit&quot;&gt;cup&lt;/span&gt;
                  ricotta cheese
              &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;recipe__directions&quot;&gt;
          &lt;h2 class=&quot;heading--2&quot;&gt;How to cook it&lt;/h2&gt;
          &lt;p class=&quot;recipe__directions-text&quot;&gt;
              This recipe was carefully designed and tested by
              &lt;span class=&quot;recipe__publisher&quot;&gt;${
                this.#data.publisher
              }&lt;/span&gt;. Please check out
              directions at their website.
          &lt;/p&gt;
          &lt;a
              class=&quot;btn--small recipe__btn&quot;
              href=&quot;${this.#data.sourceUrl}&quot;
              target=&quot;_blank&quot;
          &gt;
              &lt;span&gt;Directions&lt;/span&gt;
              &lt;svg class=&quot;search__icon&quot;&gt;
              &lt;use href=&quot;${icons}#icon-arrow-right&quot;&gt;&lt;/use&gt;
              &lt;/svg&gt;
          &lt;/a&gt;
          &lt;/div&gt;`;
    }
  }
  </code></pre>
  <p>I appreciate any help on this as I've been ripping my hair out trying to resolve this issue.</p>