时间戳

首页 > 解决方案 > 在 Vue.js 中访问本地图像文件会出现 404

vue.js - 在 Vue.js 中访问本地图像文件会出现 404

问题描述

我有一个 laravel+vue 项目，在 vue 组件中我使用本地图像。但在控制台中，我收到一条错误消息：

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

显然 vue 找不到图像并尝试获取它。

组件中的代码：

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

图像存在于正确的文件夹中。

它也存在于 public/images 中（同名）。

有什么建议我可能做错了吗？

后来补充：

在我的 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)
            }
          }
        })
      ]),

标签： vue.jslaravel-mix

解决方案

推荐阅读