Блог

Главная - Вопросы по программированию - Доступ к локальному файлу изображения в Vue.js дает 404

Доступ к локальному файлу изображения в Vue.js дает 404

#vue.js #laravel-mix

Вопрос:

У меня есть проект laravel vue, в котором в компоненте vue я использую локальный образ. Но в консоли я получаю сообщение об ошибке:

 GET http://localhost:8000/[object Module] 404 (Not Found)

Внешне vue не может найти изображение и пытается его ПОЛУЧИТЬ.

Код в компоненте:

 <img
        src="../assets/images/bankje256x256.png"
        width="80"
        heigth="80"
        class="ttr"
        @click.prevent="addBankje"
      />

Изображение существует в нужной папке.

Он также существует (с тем же именем) в общедоступных/изображениях.

Есть какие-нибудь предположения, что я могу сделать не так?

Добавлено позже:

В моем public/js/app.js Я нахожу следующие строки, относящиеся к изображению:

 /***/ "./resources/js/assets/images/bankje256x256.png":
/*!******************************************************!*
  !*** ./resources/js/assets/images/bankje256x256.png ***!
  ******************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("/images/bankje256x256.png?15a10b5a25b8eeef99f27dff448e29b5");

/***/ }),

и

  _vm._v(" "),
        _c("img", {
          staticClass: "ttr",
          attrs: {
            src: __webpack_require__(/*! ../assets/images/bankje256x256.png */ "./resources/js/assets/images/bankje256x256.png"),
            width: "80",
            heigth: "80"
          },
          on: {
            click: function($event) {
              $event.preventDefault()
              return _vm.addBankje.apply(null, arguments)
            }
          }
        })
      ]),

Комментарии:

1. Проверьте путь к изображению, а также имя и расширение. И где находится этот файл vue <img> с тегом?

2. Файл vue находится в разделе ресурсы/js/компоненты. Изображение находится в ресурсах/js/активах/изображениях

3. Хорошо, тогда, кажется, в пути нет ничего плохого. Попробуй :src="require('../assets/images/bankje256x256.png')" вместо этого.

Метки: