Vue Display Json

Posted on  by admin

Modified3 years, 2 months ago.

  • I'm playing with Vue.js and trying to display a local image from a json file unsuccessfully.
  • The other data display correctly, but not the cover image.I've looked for different solutions but nothing seems to work.
  • Images loads correctly if I get the data directly in the script of Stories.vue like this:.
  • And this is the relevant folder structure:.

what am I doing wrong? Try to do it this way:. In your template:. Let me know if it worked. Another idea:.json.

And then in your template:. Let me know if that worked 😃. Adam OrłowskiAdam Orłowski. After the input received in here, I played around with different solution and found a very simple solution that worked.

The problem is that images need to use require. So in StoryTile.vue I replaced:. also in the json file, "cover": "Blue-border-cover.png" and not the entire path which is now expresses in StoryTile.vue.

Install & Download:

and this did the trick! Modified7 months ago. Hi i am try to show json file result with vue.js the target is that result will be showed on value. this is my code:. 11 gold badge44 silver badges1212 bronze badges. 1212 bronze badges. HTML and JS have this built into the language.

This gives the default indent, to specify a custom indent provide it as the third argument to JSON.stringify(..). If you're outside of Vue then using some combo of the above snipped will do. 33 gold badges3030 silver badges3535 bronze badges1.

Preview:

3535 bronze badges. Behnam MohammadiBehnam Mohammadi. If the /api is only on the dev server you can create a vue.config.js file in the app root folder. With this files when I run npm run serve, I get the json object when navigating to /api and my regular app otherwise.

Pascal GanayePascal Ganaye. The following code shows how to show json result with Vue 3. Display a stringified json object inside a