This issue has been quite a challenge for me, as it appears to be straightforward but has turned into a complex problem.
I have a vue application that utilizes canvas to draw images. I want an API to determine the 'type' of image to display (filename), while leaving the actual data used to draw the image on the front-end. Therefore, I have stored this data in .json files within the vue front-end and currently debugging by using a string path to a file. Importing every possible file at the start of a vue module is excessive, so I am attempting to load it after receiving instructions from the API regarding what needs to be loaded.
I've experimented with various methods including HTTP requests, Filereaders, import(), and now fetch. Fetch seems to be the most promising solution thus far, as it returns something. Spent around 2 hours researching different techniques to load json (or text for parsing) from a file on the same host, but they either rely on technologies I'm not familiar with or do not function as described.
Unfortunately, each attempt fails without providing a status code or error message in the response (both are 'undefined'). The only hint I received was from Chrome's F12 network pane and console, which suggested "this site can't run without javascript. Make sure it's enabled," which seems perplexing since I have been utilizing JavaScript on the same site successfully until now. The file is one directory below the page calling it, so there shouldn't be any issues involving cross-domain access or security concerns. Moreover, the system acknowledges the existence of the file, as it immediately fails when an incorrect file name or path is specified.
I have included a simplified version of the .vue file in question, removing irrelevant sections such as canvas scripting and mathematical calculations related to the initial API call:
<template>
<div>
<canvas :id="'mobileImage'" width="120" height="80" class="image">Your Browser does not support the canvas element. Please use a different browser to view dynamic images.</canvas>
</div>
</template>
<script>
import ax from 'axios';
export default {
name: 'MobileImage',
props: {
mobileId: {
type: String,
required: true,
default: '00000000-0000-0000-0000-000000000000'
}
},
data: function() {
return {
}
},
mounted: function () {
this.render();
},
methods: {
render: function () {
var self = this;
ax
.post('https://storyteller.api.local.com:443/api/Mobiles/ImageData/' + this.mobileId)
.then(function (response) {
self.draw(response.data)
})
.catch(error => {
alert("error");
alert(error);
});
},
draw: function (ImageData) {
fetch('./canvasImages/sword_basic.json').then(response => { alert(response.text()); });
var swordData = fetch('./canvasImages/sword_basic.json');
}
}
};
</script>
<style scoped>
.image{
border: solid 1px #333333;
}
</style>
Additionally, here is a screenshot of the developer console error: Developer Networking Console Screenshot
I am also open to suggestions if this may be an issue related to software design. Utilizing JSON files on the front-end for graphics data seemed like a simple approach.
Thank you in advance.