javascript - 图片加载失败
问题描述
来自浏览器控制台的错误:
https://static.food2fork.com/pastaallavodkaa870.jpg.jpg 404
尝试在浏览器上显示图片,不知道是我的代码问题还是food2fork端的问题。
我的 index.js:
// always make sure you have the right directory
// import field
import Search from './models/Search';
// import all the function from the view
import * as searchView from './views/searchView'
import {elements} from './views/base';
/* Global state of the app
- Search obj
- current recipe obj
- shopping list object
- liked recipes
*/
// everytime we reload the app, it will be empty
const state = {}
const controlSearch = async () =>{
// 1) Get the query from the view
const query = searchView.getInput();
if(query){
// 2) new search object and add it to state
state.search = new Search(query); // new instance of the search class
// 3) prepare UI for results
// 4) Search for recipes
await state.search.getResults(); // await this promise then render the result
// 5) render result in the UI, reminder u got hit the search button
searchView.renderResult(state.search.result);
}
}
elements.searchForm.addEventListener('submit', e => {
e.preventDefault();
controlSearch();
});
我的 Search.js:
// this is the external source simply call its name
import axios from 'axios';
// query and then the search result
// class declarition ES6
export default class Search {
constructor(query){
this.query = query;
}
async getResults(){
// fetch is only gonna work for modern browser
// HTTP request axios
// if you enter the invalid the key it will not work
//key is blurred out for stackoverflow
const key = '------------------------';
// return json
// if we can not access it we are going to use the cors proxy
// const proxy = you can use google to search for cors proxy
try{
const res = await axios(`https://www.food2fork.com/api/search?key=${key}&q=${this.query}`);
this.result = res.data.recipes;
// console.log(this.result);
} catch(error){
alert(error);
}
}
}
我的 searchView.js:
// if we are in the current folder then it is simply base
import {elements} from './base';
// return the input value from the field
// implicit search automatically return
export const getInput =() => elements.searchInput.value;
const renderRecipe = recipe =>{
const markup = `
<li>
<a class="results__link" href="#${recipe.recipe_id}">
<figure class="results__fig">
<img src="${recipe.image_url}.jpg" alt=${recipe.title}>
</figure>
<div class="results__data">
<h4 class="results__name">${recipe.title}</h4>
<p class="results__author">${recipe.publisher}</p>
</div>
</a>
</li>
`;
// insert the html
elements.searchResList.insertAdjacentHTML('beforeend',markup);
}
export const renderResult = recipes => {
recipes.forEach(renderRecipe);
}
我的 base.js:
// all the DOM element will be in this class object
export const elements = {
searchForm: document.querySelector('.search'),
searchInput: document.querySelector('.search__field'),
searchResList: document.querySelector('.results__list')
}
我是网络开发的新手,并且是自学的。我希望这不是一个坏问题。我需要有经验的头脑来帮我看看这个错误,因为它不是语法或逻辑错误。非常感谢,祝您有美好的一天。
解决方案
https://static.food2fork.com/pastaallavodkaa870.jpg.jpg
您的意思是添加.jpg.jpg
吗?...如果不是,请取下最后一个.jpg
https://static.food2fork.com/pastaallavodkaa870.jpg
推荐阅读
- javascript - Onclick 使用 jQuery 从 textarea 添加/删除特定字符串
- visual-studio - 当我在代码中时,是否有任何 vs 代码快捷方式可以按 Enter 并转到下一行?
- javascript - Github Actions 上的 Mocha 并行作业
- c# - 如何为 MemoryStream 中编写的内容提供 *.csv 扩展名?
- json - 如何在本机反应中以json格式获取excel文件数据
- javascript - 反应平滑滚动但不在初始化时
- c# - 将连接的套接字保存在字典中
- python - 根据条件将行更改为0
- java - 如何使用 RCaller 将预测数据从 R 返回到 Java?
- laravel - 通过 axios 更新时出现网络错误