Невозможно требовать () путь переменной от реквизита в VueJS

Question

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

Код:

В данных компонента parent.vue:

data(){return{items:[
      {id:1, src:"../../../assets/img.png" }

В смонтированном компоненте child.vue ()

img.src = require(this.item.src); // This does not work
img.src = require("../../../assets/img.png") // This works

И console.log (this.item.src) выдает точно такую ​​же строку, поэтому ребенок на самом деле получает данные правильно

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

Что происходит?

Примечание: Я предоставляю версию для разработки через webpack-dev-server

Answer 1

Проблема должна заключаться в том, что require обрабатывается веб-пакетом статически во время компиляции, тогда как значение в пропитке разрешается во время выполнения

img.src = require(this.item.src); // This does not work since during webpack build the path is not resolved
img.src = require("../../../assets/img.png") // This works since the image is loaded and added statically

См. Этот ответ для большей ясности динамический модуль веб-пакетазагрузчик по требованию

Вы можете попробовать использовать синтаксис динамический импорт для загрузки изображения с переменной, но конфигурация веб-пакета [возможно] должна быть изменена, если вы не 't используя vue cli

это будет что-то вроде import(this.item.src).then(src => img.src=src);но должен вызываться в функции mounted(), возможно