I made a simple script that will request a json from the API, and from there, I have it display a few image to the main html. I manage to make the thumbnail works without any problem, but when I try loading the image onto the page, it does not load for some reasons. Inspecting the console on Chrome said that the server gave me a 403 error. Here is my code:
In script:
for (var i = 0; i < this.queryResults.length; i++) {
var danbooruBaseURL = "https://danbooru.donmai.us";
var previewLink = danbooruBaseURL.concat(this.queryResults.preview_file_url);
var normalLink = danbooruBaseURL.concat(this.queryResults.large_file_url);
//This is a vue application, and imgLinks,queryResults are declared globally elsewhere.
this.imgLinks.push({
previewLink: previewLink,
normalLink: normalLink,
});
this.mainIMGLinks = this.imgLinks[0].normalLink;
}
In html:
<div >
//this basically mean it binds the mainIMGLinks in the script to the src.
<img class="img-responsive" v-bind:src="mainIMGLinks" />
</div>
This is how I requested the json:
jsonURL= "https://danbooru.donmai.us/posts.json?login=username&api_key=abcdefghijklmn01234&tags=landscape&limit=15"
One interesting thing, is that if I were to copy the location of the broken image, and paste it onto another tab, I can access the image normally.Can someone let me know what is going wrong here?
Edit: I accidentally found out, that my friend's mac open the images just fine. But somehow, both chrome and firefox on window doesnt load them for me.
Edit: It turn out that it's just visual studio that is messing with my browsers. I think I manage to fix the problem now.
Updated