Не удается найти модуль "../assets/logo.png" в webpackEmptyContext (eval at ./src/component

Question

Я пытаюсь загрузить URL-адрес изображения в компонент, используя реквизиты, но кажется, что require не может принять любую переменную.Тем не менее, если мне нужно указать простой текст в качестве параметра, он будет работать

В этом случае выдается ошибка

Не удается найти модуль '../assets/logo.png' в 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>

Это работает:

<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>

Обратите внимание, что я изменил только значение внутри require на простой текст

Answer 1

Поскольку веб-пакет является статическим средством сборки (он находит все файлы, необходимые во время сборки), динамическое выражение внутри этого оператора require не будет работать, поскольку веб-пакет не знает, что разрешать и где он существует.,

При этом выражение частичное предоставляет веб-пакету достаточно информации для загрузки файла:

imglink: function() {
  const {someImageName} = this; 
  return require("../assets/${someImageName}");
}

Это скажет веб-пакету:

Привет, веб-пакет, найдите мне все возможные модули, которые могут быть разрешены в этом частичном пути, затем во время выполнения, когда эта функция вызывается, обслуживайте только модуль JS, который соответствует переданному имени.

Вот фантастическая диаграмма, которую я привожу в своем разговоре о шаблонах разделения кода

Если вы действительно нужно извлекать изображение динамически, тогда я бы рекомендовал не использовать require() для этой цели.В противном случае убедитесь, что изображения, которые вы собираетесь обслуживать, находятся в вашей локальной кодовой базе.