vue中img src 动态加载本地json的图片路径写法

在Vue中，我们使用img标签来展示图片，其中src属性用于指定图片的路径。如果需要动态加载本地json中的图片，我们可以使用相对路径来指定图片的位置。

具体操作步骤如下：

1. 创建一个包含图片路径的json文件。比如说在项目根目录下新建一个名为“images.json”的文件，其内容为：

{
  "imgPath": "./assets/images/demo.png"
}

1. 在Vue组件中引入json文件并保存。比如说在main.js中引入：

import images from './images.json'
Vue.prototype.$images = images

1. 在Vue组件中使用img标签来展示图片，并指定src属性为json文件中存放图片路径的键名：

<template>
  <div>
    <img :src="$images.imgPath" alt="demo image">
  </div>
</template>

此时图片“demo.png”就会在网页中展示出来。

下面是两个完整的例子说明：

1. 首先，创建一个包含图片路径的json文件“images.json”：

{
  "imgPath": "./assets/images/demo.png"
}

1. 在Vue组件中引入json文件并保存。比如说在main.js中引入：

import images from './images.json'
Vue.prototype.$images = images

1. 在Vue组件中使用img标签来展示图片，并指定src属性为json文件中存放图片路径的键名：

<template>
  <div>
    <img :src="$images.imgPath" alt="demo image">
  </div>
</template>

此时图片“demo.png”就会在网页中展示出来。

1. 再举一个例子，如果我们希望在json文件中存放多张图片的路径，并且可以通过点击某个按钮来进行切换展示的图片，可以采用如下的方法：

首先，创建一个包含多张图片路径的json文件“images.json”：

{
  "imgList": [
       { "path": "./assets/images/demo1.png" },
       { "path": "./assets/images/demo2.png" },
       { "path": "./assets/images/demo3.png" }
   ]
}

在Vue组件中引入json文件并保存。比如说在main.js中引入：

import images from './images.json'
Vue.prototype.$images = images

在Vue组件中使用img标签来展示图片，并使用Vue的计算属性来动态切换图片路径：

<template>
  <div>
    <button @click="changeImage">切换图片</button>
    <img :src="currentImg" alt="demo image">
  </div>
</template>

<script>
export default {
  data () {
    return {
      index: 0
    }
  },
  computed: {
    currentImg () {
      return this.$images.imgList[this.index].path
    }
  },
  methods: {
    changeImage () {
      this.index++
      if (this.index === this.$images.imgList.length) {
        this.index = 0
      }
    }
  }
}
</script>

此时，点击“切换图片”按钮，就可以动态切换多张图片的路径。