Nuxt动态资源未加载
Nuxt动态资源未加载
提问于 2020-03-07 02:18:23
我正在尝试在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
回答 2
Stack Overflow用户
发布于 2020-03-07 03:46:41
这总是一个棘手的情况。在您的示例中，可以通过将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');
}这是不需要的，因为它将为整个应用程序结构创建上下文，这将使包的大小增加一个可测量的量。如果在文件和/或类的命名中存在冲突，它还可能通过污染全局上下文并使其别名解析不正确而产生意想不到的后果。
Stack Overflow用户
发布于 2020-03-07 17:56:23
虽然很难看，但我发现的一个变通办法是创建一个对象，将图标名称作为键，将require()作为值：
const MIME_ICONS_REQUIRE = {
...
'application-msword':require('~/assets/media/mimetypes/application-msword.png'),
'application-pdf':require('~/assets/media/mimetypes/application-pdf.png'),
'application-vnd-google-earth-kml':require('~/assets/media/mimetypes/application-vnd-google-earth-kml.png'),
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60569609
复制相关文章
相似问题
腾讯云开发者
