无法加载图像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

浏览器控制台出错:

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

我是网络开发人员的新手并且自己学习。我希望这不是一个糟糕的问题。我需要一个经验丰富的头脑来帮助我看看这个错误,因为它不是语法或逻辑错误。非常感谢,祝你有个美好的一天。

提问于
用户回答回答于

删除副本.jpg,它将工作。

https://static.food2fork.com/pastaallavodkaa870.jpg

热门问答

树莓派4能够连上腾讯云物联网平台吗?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐

新版乐加固 不支持 64位应用?

Richel码农
推荐
1.麻烦确认应用自身apk中是否存在64位支持库【应用自身不存在64位支持库的话,加固后是肯定不存在的 2.乐固最新版本已适配arm64位,请更新版本或直接在官网进行加固; 3.乐固目前暂时未支持x86-64位,如需上架GooglePlay,需先删除x86支持 ... 展开详请

加固完成后多渠道打包显示androidname not found?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐
多渠道失败是工具的偶现性问题,目前这个问题已经提交技术进行排期解决。用户也可以切换电脑切换账号重新登录工具尝试。 实际上多渠道打包是加固工具的辅助工具,并不影响加固功能,用户可以选择在工具加固完成后自行进行多渠道打包的:https://blog.csdn.net/byongche...... 展开详请

请问微信云支付是否有沙箱环境?

HKC

红客学院 · 创始人 (已认证)

道可道 非常道 名可名 非常名
推荐
微信支付沙箱环境,是提供给微信支付商户的开发者,用于模拟支付及回调通知。以验证商户是否理解回调通知、账单格式,以及是否对异常做了正确的处理。 ◆ 如何对接沙箱环境? 1、修改商户自有程序或配置中,微信支付api的链接,如:被扫支付官网的url为:https://api.mch.w...... 展开详请

tencentcloud-sdk-php-master github代码上没有vendor文件夹?

推荐
因为和composer冲突,因此导出时没有包含vendor目录。如果需要,可以考虑git clone方式拿到,或者到https://cloud.tencent.com/document/sdk/PHP#.E9.80.9A.E8.BF.87.E6.BA.90.E7.A0.81.E5...... 展开详请

织云安装包在哪里下载?

使用织云,必须要满足1、2步骤1、机器要同步到c.isd.com系统。简单讲,就是在c.isd.com上有这台机器(如果c.isd.com没有,而公司的cmdb【cmdb.oa.com】有,则需要同步到c.isd.com即可,同步需要联系zhiyunhelper同步,而没有的话,...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券