Question

我正在使用framework7 CLI为“ f7 + vue cordova应用程序”生成的模板。生成的代码包括一个webpack设置，我对此不太熟悉。如果我尝试在html代码（<img src="./images/test.png">）中插入图片，则服务器将显示404错误。

查看生成的webpack.config.js，在module.exports.module.rules sectio内部有一个“本地”图像文件（其URL以点开头的图像）规则：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: 'images/[name].[ext]',
  },
},

据我了解，此规则允许通过数据uri生成图像的内联“最小化”（如果文件小于10k字节）。然后可以通过以下代码使用该图像：

import img from '../images/test.jpg;
document.querySelector('img').src = img;

我不需要import每张图像。我什至不在乎通过data-uris插入图像。我只希望能够通过设置src属性来使用图像。

我试图通过删除webpack.config中的规则并通过将加载程序更改为“ ignore-loader”（在安装插件之后）来禁用此行为，但没有任何运气。

仅供参考，webpack.config.js的内容如下：https://pastebin.com/fa4UADVR

仅供参考，控制台中报告的错误如下：

vue.esm.js:1896 Error: Cannot find module './images/logo.png'
    at webpackMissingModule (signin.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:43)
    at Proxy.render (signin.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:43)
    at VueComponent.Vue._render (vue.esm.js:3545)
    at VueComponent.updateComponent (vue.esm.js:4063)
    at Watcher.get (vue.esm.js:4476)
    at new Watcher (vue.esm.js:4465)
    at mountComponent (vue.esm.js:4070)
    at VueComponent.Vue.$mount (vue.esm.js:9047)
    at VueComponent.Vue.$mount (vue.esm.js:11941)
    at init (vue.esm.js:3124)

如何在没有Webpack模块的情况下自动投放图像

0 个答案: