图片未加载到vue.js中

Question

我正在尝试通过创建一种基本方法在vue.js项目中动态生成图像：

  methods: {
    changeLang(la
    getImg(image, ext) {
      return '~@/assets/images/' + image + '.' + ext;
    },
      ...

每个组件都会动态生成其图像：

data () {
    return {
      cat:'frenchcat',
      ...

以下行应标识方法，图像和日期，并将其转换为图像URL

<img v-bind:src="getImg(cat, 'svg')" v-bind:alt=cat>

但是由于某种原因，源代码只会返回：

<img data-v-61dd7a3d src="~@/assets/images/frenchcat.svg" alt="frenchcat"/>

为什么~@/assets/不能转换为URL路径？

Answer 1

您需要将require与v-bind:src一起使用：

getImg(image, ext) {
      return require(`~@/assets/images/${image}.${ext}`);
}

不确定是否需要在~之前使用@。