This has been driving me insane, because it seems simple, but has been a nightmare to figure out.
I have a vue application which has been using canvas to draw images. I intend to have an API dictating what 'kind' of image it should display (filename) but the actual data I use to draw the image should really be left to the front-end. So, I have that stored, still, in the vue front-end as .json files, and am basically just debugging it before hooking it up by using a string literal path to a file, for now. It's overkill to import every possible file for data at the beginning of a vue module, so I'm trying to load it after the API tells it what to load.
I've tried HTTP requests, Filereaders, import(), and now fetch. Fetch is the closest to an answer I've gotten, since it returns something. I spent maybe 2 solid hours just googling different methods to load json (or text to be parsed) from a file on the same host, but they either use technologies I'm not or just don't work the way they're explained.
However, it always fails and doesn't even return a status code or error message with the response (both are 'undefined'). The best I've gotten is from the chrome's F12 network pane and console, as the response says "this site can't run without javascript. Make sure it's enabled" which, to me, is ridiculous. I've literally been using javascript on this very same site to get to where we are, now. The file is one relative directory below the page calling it, so I can't imagine it thinks it's crossing domains or anything insecure. Additionally, it knows the file exists. It fails immediately if I don't specify the right file name or path.
included is a pared down version of the .vue file in question, I took out all the parts of it that aren't relevant; mostly canvas scripting and the math to process the initial call to the API:
<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>
and a simple screenshot of the developer console error: Developer Networking Console Screenshot
I'm also willing to hear if this is a software design, issue. Files with JSON (again, just with data for graphics, so it doesn't need to be secure) on the front-end seemed simplest.
Thank you in advance.
