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

Question

我有两个问题：

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

我会在网络上得到这个链接，但不完全是：

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

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

   导出默认{ 头 （） { 常量样式 = this.$cookie.get('app_style') 返回 { 关联： [ { rel: '样式表', 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" />

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