如何使用单选按钮在 vue 上选择图像？

Question

我想用 vue.js 创建一个单选按钮（引导程序），我可以在其中选择要可视化的图像。 我为 3 个图像创建了 3 个按钮，但我无法连接它们（当然之前的图像必须消失）。

<template>
  <b-container>
    <b-row>
      <b-col>
        <b-form-group label="Map to visualize">
          <b-form-checkbox-group
            v-model="map.value"
            :options="map.options"
            name="buttonsMap"
            buttons
          ></b-form-checkbox-group>
        </b-form-group>
      </b-col>
    </b-row>
    <b-row class="map">
      <b-col cols="9">
        <h3>Map</h3>

        <div id="app">
          <img :src="require('./image/Map1.png')" height="400" />
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: 'Rad',
  data() {
    return {
      map: {
        value: 'Map1',
        options: ['Map1', 'Map2', 'Map3'],
      },
    }
  },
}
</script>

这可行，但我只能看到一张地图。我想添加 3 个与按钮连接的按钮。

Answer 1

我相信您的 img src 必须包含不同 img 路径的动态值：

<div id="app">
  <img :src="'require(./image/' + map.value + '.png)'" height="400">
</div>

这是一个演示：codepen