在 webpackEmptyContext 中找不到模块“../assets/logo.png"(评估在 ./src/component
[英] Cannot find module '../assets/logo.png' at webpackEmptyContext (eval at ./src/component
本文介绍了在 webpackEmptyContext 中找不到模块“../assets/logo.png"(评估在 ./src/component的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 props 将图像 url 加载到组件中，但似乎 require 不能接受任何变量.但是，如果我给 require 一个纯文本作为参数，它就可以工作
这个给出了错误
<块引用>
在 webpackEmptyContext 中找不到模块../assets/logo.png"(评估在 ./src/component
<div>{{图片链接}}<div style="width: 150px; height: 150px; background-color: red"><img :src="imglink" alt="" height="150px" width="150px">
</模板><脚本>导出默认{名称:图像测试"，道具:{图片链接:字符串，},计算:{imglink:函数(){//this.imagelinkconst modulepatha = '../assets/logo.png'返回要求(模块路径)}}}<样式范围></风格>
这个有效:
<div>{{图片链接}}<div style="width: 150px; height: 150px; background-color: red"><img :src="imglink" alt="" height="150px" width="150px">
</模板><脚本>导出默认{名称:图像测试"，道具:{图片链接:字符串，},计算:{imglink:函数(){//this.imagelinkconst modulepatha = '../assets/logo.png'return require('../assets/logo.png')//改变了这个}}}<样式范围></风格>
请注意，我只将 require 中的值更改为纯文本
解决方案
因为 webpack 是一个静态构建工具(它会在构建时找到所有需要的文件)，require 里面的一个动态表达式语句不起作用，因为 webpack 不知道要解决什么问题以及它存在的位置.
话虽如此，partial 表达式确实为 webpack 提供了足够的信息来加载文件:
imglink: function() {const {someImageName} = 这个；return require("../assets/${someImageName}");}
这会告诉 webpack:
<块引用>
你好webpack，把这个partial path能解析的所有可能的模块给我找出来，然后在运行时，调用这个函数的时候，只提供传入的name对应的JS Module.
这是我在我的
如果您确实需要动态获取图像，那么我建议不要将 require() 用于此目的.否则，请确保您要提供的图像在您的本地代码库中.
I am trying to load an image url into a component using props but it seems like require cannot accept any variable. However, if I give require a plain text as parameter, it works
This one gives the error
Cannot find module '../assets/logo.png' at webpackEmptyContext
(eval at ./src/component
<template>
<div>
{{imagelink}}
<div style="width: 150px; height: 150px; background-color: red">
<img :src="imglink" alt="" height="150px" width="150px">
</div>
</div>
</template>
<script>
export default {
name: "ImageTest",
props:{
imagelink: String,
},
computed: {
imglink: function () {
// this.imagelink
const modulepatha = '../assets/logo.png'
return require(modulepatha)
}
}
}</script>
<style scoped>
</style>
This one works:
<template>
<div>
{{imagelink}}
<div style="width: 150px; height: 150px; background-color: red">
<img :src="imglink" alt="" height="150px" width="150px">
</div>
</div>
</template>
<script>
export default {
name: "ImageTest",
props:{
imagelink: String,
},
computed: {
imglink: function () {
// this.imagelink
const modulepatha = '../assets/logo.png'
return require('../assets/logo.png') //changed this
}
}
}</script>
<style scoped>
</style>
Notice that I only changed the value inside require to a plain text
解决方案
Because webpack is a static build tool (it finds all the files needed at build time), a dynamic expression inside of that require statement isn't going to work because webpack has no idea what to resolve and where it exists.
That being said, a partial expression does provide webpack with enough information to load a file:
imglink: function() {
const {someImageName} = this;
return require("../assets/${someImageName}");
}
This would tell webpack:
Hey webpack, find me all the possible modules that can be resolved in this partial path, then at runtime, when this function is called, only serve up the JS Module that corresponds to the name passed in.
Here's a fancy diagram I give in my code splitting patterns talk
If you truly need to fetch an image dynamically, I'd recommend not using require() for this purpose then. Otherwise, ensure that the images you are going to serve up are in your local codebase.
这篇关于在 webpackEmptyContext 中找不到模块“../assets/logo.png"(评估在 ./src/component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
