Having trouble loading images in JavaScript due to an issue with JSON: undefined.jpg not found

I'm struggling to concatenate my image names in this JavaScript code as a newbie, especially since it's pulling from JSON. Any assistance would be greatly appreciated! Below is the JS code snippet I'm working with:

 function log(msg){
    console.log(msg)
 }

function createImage(file, parent){
    var str = file;
    var filename = ("photos/" + filename + ".jpg");
    var image = new Image();
    image.src = filename;
    image.style.width = "50px";
    image.style.height = "auto";

    image.onload = function(){
        log('good ' + file );
        parent.appendChild(image); //adds the image to the page!
    }

    image.onerror = function(){
        log('not able to load ' + filename );
        //parent.appendChild(image);
    }
}
 

Answer №1

One thing to note is the confusion between the variables `filename` and `file`. ;)

function log(msg){
     console.log(msg)
}

function createImage(file, parent){
    var str = file; // unused
    var filename = ("photos/"+file+".jpg"); // `filename` was previously undefined.
    var image = new Image();
    image.src = file;
    image.style.width = "50px";
    image.style.height = "auto";

    image.onload = function(){
        log('Successful loading of ' + file );   
        parent.appendChild(image); // Adds the image to the page!
    }

    image.onerror = function(){
        log('Unable to load ' + filename );   
        //parent.appendChild(image);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preparing data in the Vuex Store efficiently for an AJAX request

Dealing with a Vuex store that holds around 30 fields has been quite the challenge for me over the past couple of days. I've been struggling to properly gather the data before sending it through an AJAX post method. Being aware of the reactivity of Vu ...

What causes the return of undefined when accessing an item from an object?

In order to extract the item "Errors" from the data object provided below: {Id: 15, Date: "22-02-2019", Time: "22:45", Sport: "Football", Country: "United Kingdom", …} Bet: "Win" Bookie: "Bet365" Competition: "Premier League" Country: "U ...

Error in Java code: Node duplication while converting MySQL hierarchy data into JSON format

Utilizing Spring to retrieve a JSON object as a response from a hierarchy structured across two Mysql tables. ------------ ----------------- | Concepts | | Relationships | |----------| |---------------| | id | | relation_id | | ti ...

Arranging by upcoming birthday dates

Creating a birthday reminder app has been my latest project, where I store names and birthdays in JSON format. My goal is to display the names sorted based on whose birthday is approaching next. Initially, I considered calculating the time until each pers ...

"Integrating `react-textarea-code-editor` with Remix: A Step-by-Step Guide

Upon loading the root of my web app, I encountered an error. The react-textarea-code-editor component is accessed via a separate route. The same error persisted even after following the suggestions provided here: Adding react-textarea-code-editor to the ...

Tips for utilizing ng-repeat with standard JSON data structures

I have a JSON structure like this: [{ Entry: [{ ID:123, Name: 'XYZ', Address: '600, PA' }, { ID:123, Name: 'ABC', Address: '700, PA' }, { ID:321, Name: 'RRR', ...

Tips for successfully uploading FormData files using Axios: Resolving the TypeError of "file.mv is not a function"

When transmitting a file from one server to another using Axios, I am facing an interesting scenario where one server is an app backend and the other is a blockchain server. The destination for the file transmission is set up as follows: router.post("/a ...

seeking a way to integrate Amazon information into a PHP form

Trying to fix my old system for integrating Amazon search results into a form has been quite the challenge. Originally, I had a PHP-based form where users inputted an ISBN, triggering a JavaScript program to generate a signed request that returned XML data ...

The retrieved item has not been linked to the React state

After successfully fetching data on an object, I am attempting to assign it to the state variable movie. However, when I log it to the console, it shows as undefined. import React, {useState, useEffect} from "react"; import Topbar from '../H ...

Having difficulty loading the JSON configuration file with nconf

I'm currently attempting to utilize nconf for loading a configuration json file following the example provided at: https://www.npmjs.com/package/nconf My objective is to fetch the configuration values from the json file using nconf, however, I am enc ...

An error of unknown token U was encountered in the JSON data starting at position 0

I am facing an issue with my MEAN Stack development. Currently, I have an Angular Form set up with proper values to create a company in the database using Node Express on the backend. However, I keep encountering an error stating that the JSON in Node is ...

Display or conceal div based on chosen options

I am working on a feature that involves three dropdown select boxes, each containing different sets of demographic attributes. My goal is to show a score based on the combination of selections made by the user. For example, if a user chooses Male, 18-24, A ...

Visual Studio Terminal displaying "Module Not Found" error message

After successfully downloading nodejs onto my computer, I created a javascript file and stored it in a folder on my desktop. However, when I tried to run the JS code using the Visual Studio terminal, I encountered the following error message. I am confiden ...

Troubleshooting Problem with CSS Background-Image in Safari

These questions have been popping up all over the web with little response. I've added some CSS in jQuery like this: $('#object').css('background-image', 'url(../../Content/Images/green-tick.png)'); This works in all b ...

Transform a log file into a JSON structure

In my log file titled request.log, the following entries are present: [2022-06-30T09:56:40.146Z] ### POST https://test.csdf/auth/send_otp { "method": "POST", "headers": { "User-Agent": "testing&q ...

When refreshing the React page, it appears blank

Encountering a issue with one of the pages on my react website. Whenever I attempt to reload the Home.js page by refreshing the browser, it displays blank. However, when using the back navigation button in the browser, it functions correctly. I've che ...

Are there any AJAX tools or packages in Node.js Express for connecting (posting/getting) with other servers and retrieving data?

Can someone please guide me on how to utilize ajax in node.js to send and receive JSON data from another server? Is there a package available that allows for this functionality, similar to jQuery's $.ajax, $.post, or $.get methods? ...

Showing a JSON data as HTML content within a div element

How can I retrieve information from a tag within a list using dot notation? Both backend and frontend are written in Javascript.</p> <p>Here is the HTML code:</p> <pre><code><div>{{ GameData }}</div> </pre> ...

What is the best way to retrieve the 'items' data stored in this list?

I am working with a list of data that includes 6 categories - bags, shoes, girls, boys. Each category contains the same type of data like id, items (with properties: desc, id, imageUrl, name, price), routeName, and title. My goal is to loop through all ca ...

Customizing textfield error color in MUI5 React based on conditions

I am looking for a way to dynamically change the color of error messages in my application, with warnings displaying in orange and errors in red. I prefer not to use useStyle as it is now deprecated in mui5. Below is the code snippet I have created: import ...