Vue. js Ошибка "Не удается найти модуль './undefined'" из веб-пакета при использовании src = require () - PullRequest
Новая
       35

Vue. js Ошибка "Не удается найти модуль './undefined'" из веб-пакета при использовании src = require ()

1 голос
/ 29 апреля 2020

Я пытаюсь загрузить изображения из локальной папки, используя src = "" из тега img, но я хочу загрузить их, используя бэкэнд. У внешнего интерфейса уже есть относительный путь, который называется "../assets/imgs/", а у внутреннего интерфейса только имя и расширение ex) "1.png". Дело в том, что это работает, но я получаю сообщения об ошибках.

Это вызывает у меня проблему 

<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>

вот функция, которая вызывается 

  methods: {
    getIconPath(iconName) {
      return iconName ? require("../assets/imgs/" + iconName) : ''
    }

Вот оба сообщения об ошибках, которые я получаю на консоли 

[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
       <Navbar> at src/components/navbar.vue
         <Main> at src/main.vue
           <Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
    webpackContextResolve .*$:13
    webpackContext .*$:8
    getIconPath profile.vue:74
    render profile.vue:12
    VueJS 43
    <anonymous> main.js:31
    js app.js:1415
    __webpack_require__ app.js:785
    fn app.js:151
    1 app.js:1488
    __webpack_require__ app.js:785
    checkDeferredModules app.js:46
    <anonymous> app.js:861
    <anonymous>

Я нашел очень мало ресурсов, чтобы помочь, но многие из них сказали, что требуется исправляет их проблемы. До сих пор я пытался переместить его в другую папку, переместить требование как метод функции, используя абсолютный путь, используя v-attr, и связать его без необходимости. Тем не менее мне не повезло избавиться от сообщения об ошибке. Вот еще одна ссылка на кого-то, у кого такая же проблема, как и у меня, но я до сих пор не могу понять, как они ее исправили.

https://forum.vuejs.org/t/how-to-fix-the-console-log-error-when-using-require-method-to-bind-an-img-src/77979

Я бы очень очень ценю помощь !! Я застрял на этом много часов и не могу найти полезного решения. Если это не очень хороший способ загрузки изображений из серверной части go, не стесняйтесь предлагать другие альтернативные способы сделать это. Спасибо!

1 Ответ

0 голосов
/ 29 апреля 2020

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

{
  user: {}
}

Проблема здесь в том, что user.icon это undefined, по крайней мере, в течение некоторого периода времени. Там, где вы без необходимости конвертируете это в строку с 

getIconPath(`${user.icon}`)

, вы конвертируете undefined в строку "undefined" (потому что JavaScript очень забавно), отсюда и ваше сообщение об ошибке. Простое решение состоит в том, чтобы не использовать шаблон строки, ie

getIconPath(user.icon)

Чтобы избежать подобных проблем, я бы вместо этого использовал вычисляемое свойство для разрешения импорта изображений , Это более эффективно, чем выполнение метода в вашем шаблоне, который происходит на каждом тике 

computed: {
  userWithIcon () {
    return {
      ...this.user, 
      icon: this.user.icon && require(`../assets/imgs/${this.user.icon}`)
    }
  }
}

и в вашем шаблоне 

<img width="100px" height="100px" :src="userWithIcon.icon">
...