在 webpackEmptyContext 中找不到模块“../assets/logo.png"(在 ./src/component

我正在尝试使用 props 将图像 url 加载到组件中，但似乎 require 不能接受任何变量.但是，如果我给 require 一个纯文本作为参数，它可以工作

这个给出错误

<块引用>

在 webpackEmptyContext 中找不到模块 '../assets/logo.png'(评估在 ./src/component

<模板>
{{图片链接}}<div style="width: 150px; height: 150px; background-color: red"><img :src="imglink" alt="" height="150px" width="150px"></div></div></模板><脚本>导出默认{名称:图像测试"，道具:{图片链接:字符串，},计算:{imglink:函数(){//this.imagelinkconst modulepatha = '../assets/logo.png'返回要求(模块路径)}}}</脚本><样式范围></风格>

这个有效:

<模板>
{{图片链接}}<div style="width: 150px; height: 150px; background-color: red"><img :src="imglink" alt="" height="150px" width="150px"></div></div></模板><脚本>导出默认{名称:图像测试"，道具:{图片链接:字符串，},计算:{imglink:函数(){//this.imagelinkconst modulepatha = '../assets/logo.png'return require('../assets/logo.png')//改变了这个}}}</脚本><样式范围></风格>

请注意，我只将 require 中的值更改为纯文本

解决方案

因为 webpack 是一个静态构建工具(它会在构建时找到所有需要的文件)，所以 require 内部的动态表达式声明不起作用，因为 webpack 不知道要解决什么以及它存在的位置.

话虽如此，partial 表达式确实为 webpack 提供了足够的信息来加载文件:

imglink: function() {常量 {someImageName} = 这个；返回要求(../assets/${someImageName}")；}

这会告诉 webpack:

<块引用>

嘿webpack，在这个部分路径中找到所有可以解析的可能模块，然后在运行时，当调用这个函数时，只提供与传入的名称对应的JS模块.

这是我在

如果您确实需要动态获取图像，我建议您不要为此使用 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.