VueJS：为开发模式和生产模式设置img src链接

Question

在我的Vue.js应用程序中加载图像时遇到麻烦。

鉴于我拥有：

<img :src="imgSrc" />

这在开发模式下有效：

data() {
  return {
    imgSrc: require('../assets/MyLogo.png'),
  }
}

并且这在生产模式下有效：

data() {
  return {
    imgSrc: '/sites/burnley/assets/MyLogo.png',
  }
}

但是如何进行此设置，以便在为生产而构建时可以使用相同的代码库而不必在行中注释/注释行？

附加：我已经试过了：

data() {
  return {
    imgSrc: this.prodMode ? '/sites/burnley/assets/MyLogo.png' : require('../assets/MyLogo.png'),
  }
}

但是这根本没有链接。

Answer 1

您可以通过这种方式引用资产：

require('@/assets/MyLogo.png');

Answer 2

执行以下操作：

data() {
  return {
    imgSrc: process.env.NODE_ENV === 'production' ? '/sites/burnley/assets/MyLogo.png' : require('../assets/MyLogo.png'),
  }
}

希望对您有帮助