无法从API嵌入图像URL

本教程将介绍无法从API嵌入图像URL的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

无法从API嵌入图像URL 教程 第1张

问题描述

我一直在学习一个编码教程,该教程从API中提取食谱信息并将其显示在页面上。

一切都很正常,直到我离开一会儿又回来。现在,当我将标记插入页面时,提取请求中的图像URL将无法正确显示。

在控制台中,它显示整个API FETCH请求都通过了,数据在那里,但是图像不会嵌入。

我收到此错误:

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

以下是我正在使用的FETCH请求和嵌入代码:

取码:

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);
  }
};

嵌入代码模块:

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 = `
<div class="spinner">
  <svg>
 <use href="${icons}#icon-loader"></use>
  </svg>
</div>`;
 this.#clear();
 this.#parentElement.insertAdjacentHTML('afterbegin', spinnerMarkup);
  }
  #clear() {
 this.#parentElement.innerHTML = '';
  }
  #generateMarkup() {
 return `
  <figure class="recipe__fig">
  <img src="${this.#data.image}" alt="${
this.#data.title
 }" class="recipe__img" />
  <h1 class="recipe__title">
<span>${this.#data.title}</span>
  </h1>
  </figure>

  <div class="recipe__details">
  <div class="recipe__info">
<svg class="recipe__info-icon">
<use href="${icons}#icon-clock"></use>
</svg>
<span class="recipe__info-data recipe__info-data--minutes">${
  this.#data.cookingTime
}</span>
<span class="recipe__info-text">minutes</span>
  </div>
  <div class="recipe__info">
<svg class="recipe__info-icon">
<use href="${icons}#icon-users"></use>
</svg>
<span class="recipe__info-data recipe__info-data--people">4</span>
<span class="recipe__info-text">servings</span>

<div class="recipe__info-buttons">
<button class="btn--tiny btn--increase-servings">
 <svg>
 <use href="${icons}#icon-minus-circle"></use>
 </svg>
</button>
<button class="btn--tiny btn--increase-servings">
 <svg>
 <use href="${icons}#icon-plus-circle"></use>
 </svg>
</button>
</div>
  </div>

  <div class="recipe__user-generated">
<svg>
<use href="${icons}#icon-user"></use>
</svg>
  </div>
  <button class="btn--round">
<svg class="">
<use href="${icons}#icon-bookmark-fill"></use>
</svg>
  </button>
  </div>

  <div class="recipe__ingredients">
  <h2 class="heading--2">Recipe ingredients</h2>
  <ul class="recipe__ingredient-list">
${this.#data.ingredients
  .map(ing => {
 return `
<li class="recipe__ingredient">
<svg class="recipe__icon">
 <use href="${icons}#icon-check"></use>
</svg>
<div class="recipe__quantity">${ing.quantity || ''}</div>
<div class="recipe__description">
 <span class="recipe__unit">${ing.unit}</span>
 ${ing.description}
</div>
</li>`;
  })
  .join('')}


<li class="recipe__ingredient">
<svg class="recipe__icon">
 <use href="${icons}#icon-check"></use>
</svg>
<div class="recipe__quantity">0.5</div>
<div class="recipe__description">
 <span class="recipe__unit">cup</span>
 ricotta cheese
</div>
</li>
  </ul>
  </div>

  <div class="recipe__directions">
  <h2 class="heading--2">How to cook it</h2>
  <p class="recipe__directions-text">
This recipe was carefully designed and tested by
<span class="recipe__publisher">${
  this.#data.publisher
}</span>. Please check out
directions at their website.
  </p>
  <a
class="btn--small recipe__btn"
href="${this.#data.sourceUrl}"
target="_blank"
  >
<span>Directions</span>
<svg class="search__icon">
<use href="${icons}#icon-arrow-right"></use>
</svg>
  </a>
  </div>`;
  }
}

我非常感谢在这方面的任何帮助,因为我一直在竭尽全力解决此问题。

推荐答案

我现在正在做同样的教程。我只能通过添加html图像标记Crosssorigin=&匿名&来修复它。看看这是否能为您解决问题。

好了关于无法从API嵌入图像URL的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。