Vue путь динамического изображения (изображение не показано)

Question

Я пытаюсь загружать разные картинки динамически.Но это пока не сработает.В шаблоне у меня есть тег img с динамическим исходным путем:

 <template>
  <div id="test">
    <img src="require('../../assets/containermoduls/${pname}.png')" />
  </div>
</template>

здесь моя функция данных:

<script>

export default {
  data () {
    return {
    pname: '2x5'
}
}
}
</script>

Это моя структура папок:

-src 
--assets
---containermoduls
----2x4.png
--components
---p3component
----Page3Left.vue (where my code is from)

Кто-нибудь знает, что я делаю не так?Я не получаю никаких сообщений об ошибках на своей консоли.Вместо изображения я вижу что-то вроде значка изображения.

Answer 1

Вы должны использовать привязку :src вместо src

<img :src="require('../../assets/containermoduls/${pname}.png')" />