Ask Your Question
1

Can we link a local JSON file to an image's src attribute in Vue.js?

asked 2023-07-14 07:43:45 +0000

ladyg gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
0

answered 2023-07-14 07:56:02 +0000

devzero gravatar image

Yes, it is possible to link a local JSON file to an image's src attribute in Vue.js. One way to achieve this is by using a computed property that reads the JSON file and returns the image URL from it. Here is an example:

<template>
  <img :src="imageSrc" alt="My Image">
</template>

<script>
import myData from './data.json';

export default {
  computed: {
    imageSrc() {
      return myData.image;
    }
  }
}
</script>

In this example, the JSON file is imported into the component and its image URL is returned as the computed property imageSrc. Then, the imageSrc is bound to the src attribute of the image tag, which will display the image in the component.

Note that the JSON file should contain a property that holds the image URL, in this case called image. The structure of the JSON file may vary depending on the data you want to display.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-07-14 07:43:45 +0000

Seen: 15 times

Last updated: Jul 14 '23