如何使用单选按钮选择Vue上的图像？

Question

I want to create with vue.js a radio button (bootstrap) where I can select the image to visualize. I created 3 buttons for 3 images but I can't connect them (of course the previous image must disappear).

<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>

This works, but I can only see one map. I wanna add 3 of them connected with the buttons.

Answer 1

I believe your img src must include a dynamic value for the different img paths:

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

here is a Demo : codepen