Nuxt 动态资产未加载

Question

我正在尝试在nuxt. 我遵循了所有建议说应该使用require但我无法让它工作。

有了这个在我的模板中，

<v-img  :src="mimeTypeUrl()"></v-img>

以下结果在 Error: "Cannot find module '~/assets/media/application-vnd-google-earth-kmz.png'"

methods: {
    mimeTypeUrl() {
      const f = '~/assets/media/application-vnd-google-earth-kmz.png';
      return require(f);
    }
  }

但这很好用：

methods: {
    mimeTypeUrl() {
      return require('~/assets/media/application-vnd-google-earth-kmz.png');
    }
  }

这里有什么问题，我该如何解决？

@nuxt/core version: 2.11.0

webpack version: 4.41.6

Answer 1

这始终是一个棘手的情况。在您的情况下，您可以通过将 别名f为图标名称并在路径中串联使用它来解决此问题：

mimeTypeUrl(icon) {
  return require(`~/assets/media/${icon}`);
}

然后用图标作为参数调用它：

:src="mimeTypeUrl('application-vnd-google-earth-kmz.png')"

这是可行的，因为 webpack 将为您的目录创建一个完整的上下文/assets/media，其中将包含您的图像文件。

不建议

您也许可以通过在路径前面添加空字符串来为整个项目创建上下文，从而真正欺骗 webpack

mimeTypeUrl(icon) {
  return require('' + '~/assets/media/application-vnd-google-earth-kmz.png');
}

这是不希望的，因为它将为整个应用程序结构创建上下文，这将使包大小增加可测量的量。如果文件和/或类的命名发生冲突，它还可能会污染全局上下文并导致别名无法正确解析，从而产生意想不到的后果。