As mentioned, I'm using the Marvel API. At mounted() I use this action:
mounted() {
this.$store.dispatch("get/getCharacter", this.$route.params.id);
},
This uses axios to call for the character object, and sends that payload to a mutation, which updates the state of character: {}. I use a getter to call the state of the character to output in my page. Everything works, the image appears and if I interpolate the string to the page, that appears as it should. However, I'm still getting the typeError. I'm creating the img like this:
<img :src="`${character.thumbnail.path}/portrait_incredible.${character.thumbnail.extension}`
So, doing this {{ character.thumbnail.path }} outputs the correct 'path' string from the object. The image loads perfectly on my computer too, but not on my Oppo phone (I've uploaded it to Netlify to check). Strangely, my friends iPhone does load the images using the Netflify link.
What am I doing wrong, and how can I make this error go away?
Thanks for any help!
I know this question is old, but I would like to give my solution since no one has answered this question. So it may help someone in future.
You can use the optional chaining operator to solve this,
The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.
character.thumbnail?.path
character.thumbnail?.extension