vue.js - 如何从 NuxtJS 中的资产文件夹加载动态图像

Question

我有两个问题：

1. 如果我在 src 中使用变量：

我将在网络上获得此链接，而不是确切地说：

http://localhost:3000/~/assets/product/image/bg.png

2. 类似于第一个问题。我想在 head() 方法中使用动态 css 文件：

   导出默认 { head () { const style = this.$cookie.get('app_style') return { link: [ { rel: 'stylesheet', href: ~/assets/${style}.css} ] } } }

Answer 1

要在资产文件夹中加载动态图像，您可以像这样require告诉webpack要加载哪个图像。在您的模板中，您可以执行以下操作：

<img :src="require(`../assets/img/${folderType}/bg1.png`)" />

注意：假设folderType在您的脚本部分中定义

您可以将 require 语句提取到计算属性中（将使您的模板更清晰）。就像这样：

export default {
  // ...
 data() {
  return {
   folderType: 'folderTypeGoesHere'
}
},
  computed: {
    imagePath () {
      return require(`../assets/img/${this.folderType}/bg1.png`) // the module request
    }
  }
}

然后在您的模板中使用：

<img :src="imagePath" />

对于您的第二个问题，您可以解决不使用波浪号~别名而只使用相对路径，就像我在上面的图像路径示例中所做的那样。