是否可以使用 env 在 Nuxt js 中动态导入图像文件？答案

【问题标题】：Is it possible to import image file dynamically in Nuxt js with env?是否可以使用 env 在 Nuxt js 中动态导入图像文件？
【发布时间】：2021-01-30 17:53:18
【问题描述】：

// env.development.js

module.exports = {
  fileName: 'banner_dev.png'
}

// env.production.js

module.exports = {
  fileName: 'banner_prod.png'
}

// index.vue

<script>
import bannerSrc from '@/assets/img/' + process.env.fileName

export default {
  data () {
    return {
      banner: {
        src: bannerSrc,
      }
    }
  },
</script>

您好，我是 Nuxt js 的新手。我想在构建时使用 env 值动态导入图像文件。但是，我在下面收到错误。

import bannerSrc from '@/assets/img/' + process.env.fileName

是否可以使用 env 文件动态导入图像文件？如果可能的话，有解决办法吗？谢谢！

【问题讨论】：

标签： javascript vue.js webpack nuxt.js

【解决方案1】：

是的，你可以。

按照以下步骤操作：

1 - 在 .env 文件中定义您的 var：

IMAGE=lama

2 - 在 nuxt.config.js 文件中添加环境变量：

{
  publicRuntimeConfig: {
    image: process.env.IMAGE
  },
}

3 - 在 vue.js 文件中调用它：

<img
  :src="require(`~/assets/images/${$config.image}.jpg`)"
  style="width: 250px; height: 200px"
/>

这是一个代码框： https://codesandbox.io/s/nuxtjs-load-image-dynamically-with-environment-variable-e3xgf

玩得开心！ :)

【讨论】：