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'),
  }
}

我希望对您有帮助