vue引入img出现[object Module]问题..

最新推荐文章于 2023-10-09 12:23:24 发布

穿秋裤哒大爷.

最新推荐文章于 2023-10-09 12:23:24 发布

阅读量329

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_33198558/article/details/112919212

版权

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import引入图片地址变量接收一下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

穿秋裤哒大爷.

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决Vue中img图像src变成“[object Module]“无法正确加载的问题

zyh20090823的博客

06-05

3362

会出现此问题的原因解决方案一

vue3自动引入 svg

ranshakalove的博客

03-06

1011

vue3 自动引入svg

1 条评论您还未登录，请先登录后发表或查看评论

app开发html <img src=,webpack打包html里面img后src为“[object Module]”问题

weixin_30222083的博客

06-05

在html中引入img图片Document1 使用url-loader/file-loader结合html-loader打包{test: /\.(png|jpg|gif|jpeg)$/,use: [{loader: 'url-loader',loader: 'file-loader',options: {name: '[name].[ext]',limit: 10240}}]},{test:...

webpack HTML片段打包,webpack打包html里面img后src为“[object Module]”问题

weixin_29250573的博客

06-11

199

解决React 的＜img ＞src使用require的方式图片显示不出来或者音频显示不出来，展示的是[object Module]的问题

m0_72958893的博客

10-09

1433

当我们用单文件写组件时，在 script 标签内使用的是 ES6 的语法且使用 export default 进行默认导出。然而，require 是 CommonJS 的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件。相反，如果文件中使用 CommonJS 或 AMD 模块化语法，使用 module.exports 对象进行导出，那么使用 require 导入时就不需要使用 .default 来获取。

图片img标签 src="[object Module]" --学习笔记

热门推荐

simper_boy的博客

12-09

1万+

在使用webpack4初始化项目，基础配置完之后出现的一个问题。如下图 img属性src="[object Module]"，引入图片的方式为配置的图片loader试了两种都不行：file-loader、url-loader 配置如下解决办法在option里面加入 esModule: false ...

Vue（二）：2.0与3.0的差异、vue.config.js、引入全局样式、router重定向、elementui依赖、git命令提交文件

Start_Simple的博客

03-09

1060

No Babel config file detecte报错处理、vue.config.js配置、全局默认样式、代码上传远端库

vue识别不了.ico后缀的图片，显示[object Module]

ME_GIRL的博客

08-15

889

1.vue识别不了.ico后缀的图片，显示[object Module] 报错如下： 2.vue.config.js配置 module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|ico)$/i) .use('url-loader') .loader('url-loader') .t

vue.config.js 配置

web15870359587的博客

03-02

2666

vue.config.js配置项 vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建创建vue.config.js vue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。在根目录中创

在Vue 组件打包后标签 ‘ img src=“./assets/logo.png“ ’在前台页面的路径下显示 src=[object Module]?

Baron的技术blog

08-05

5422

组件中的原始代码：打包后出现：解决方案：在配置 file-loader 的时候，设置 options 中的 esModule:false 就可以了。示例代码如下： { test: /\.(png|jpe?g|gif)$/i, // use: 'file-loader', use: [ { loader: 'file-loader', options: {

webpack打包html里面img后src为“[object Module]”问题

qq_42535651的博客

08-28

356

用 file-loader 中 esModule 默认为 true，把它修改成 false 就可以正常显示图片了 { test: /\.(png|jpg|gif|eot|woff|ttf|svg|webp|PNG)(\?\S*)?$/, use: [ { loader: "file-loader", options: { esModule: false, limit: 10240 } }, ], }, ...

Cannot GET /[object%20Module]

kaiyuantao的专栏

03-30

1139

问题：使用typescript引入图片资源无法展示，提示Cannot GET /[object%20Module] TSX文件中写法： <imgsrc={require('../../public/pic/img_mountains_wide.jpg')}style={{width:'100%'}}/> 解决：修改webpack.development.js { test: /\.(png|jpg|gif|ico)$/i, use: [...

亲手搭建vue项目的过程--加载图片 [object%20Module]

HQ DevJ的专栏

05-19

2375

我在用webpack 4.43.0的版本的时候，加载图片显示[object%20Module] ，出现问题当时有点懵，因为我的图片路径是对的，为什么加不出来，之后利用调试工具，看到src中的url为：[object%20Module] ，但是怎么会显示这个呢？有点郁闷，查官方的webpack API看怎么处理？ webpack加载图片有两个loader可以使用，一个是file-loader，一个是url-loader。看这两个loader的相关讲解： file-loader:...

webpack 设置img 的src属性出现 [object Object]

weixin_42429220的博客

08-10

1271

第一步 webpack配置url-loader、file-loader 配置 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude:[resolve('src/icons/svg')], options: { esModule: false, //

解决在vue中img标签不显示图片的问题

munangs的博客

08-10

4756

解决在vue中img标签不显示图片的问题

webpack打包图片资源-img标签中src 为 [object Module]

zm_miner的博客

02-02

1184

使用webpack打包图片资源时, 使用 url-loader 可以处理less/css/styles文件中引入的图片资源但是当在html中直接使用img标签引入图片时, webpack是不会识别, 如下: img标签中的图片没有显示所以需要html-loader来(负责引入img, 从而能被url-loader进行处理) 打包成功以后, 会有一个问题, 在打包成功后的build文件下的html中img标签的src引入路径不正确原因: 因为url-loader默认使用es6模块化解析, 而h

如何解决vue项目中图片展示的是[object Module]问题

CS13477062349的博客

01-06

7642

vue项目中这样展示图片 <img src="../../images/menu1.png" alt=""> 前端页面展示的数据是[object Module] 在网上找了很多都没找到原因所在，后来看到有人说：一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的，所以我把图片以变量的形式传入，这样就解决了，图片就能在前台正常展示了 ...

vue项目中图片不显示img标签src=[object Moudle]问题解决办法

Alicee_的博客

06-22

2743

今天在学习vue的时候，使用webpack配置配置项目时，在页面上加了一张图片 <img src="../../images/menu1.png" alt=""/> 但是居然没有显示出来，我就奇了怪了，然后我就找找找，发现页面控制台上img的src="[object Moudle]" 解决方法：配置图片url-loader,在webpack.config…js中添加加入esModule:false即可,其作用是启用CommonJS模块语法 {test:/\.(jpg|png|gif|bmp|

vue.config https

最新发布

01-05

### 关于 `vue.config.js` 的配置项及使用方法 #### 基本概念 `vue.config.js` 是 Vue CLI 项目中的配置文件，用于自定义 Webpack 配置。通过这个文件可以调整项目的构建行为和优化设置。 #### 常见配置项 ##### publicPath 指定应用打包后的公共路径，默认值为 `/` 。如果部署到子目录下，则需要更改此选项[^1]。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/prod-sub-path/' : '/' }; ``` ##### outputDir 当运行 `npm run build` 构建时生成的生产环境构建文件夹的位置，默认是 `dist` ，可以通过修改来改变输出位置[^2]。 ```javascript module.exports = { outputDir: 'build' }; ``` ##### assetsDir 相对于 `outputDir` 的静态资源 (`js`, `css`, `img`, `fonts`) 目录。 ```javascript module.exports = { assetsDir: 'static' }; ``` ##### lintOnSave 控制是否在开发环境下启用eslint检测以及何时触发。 ```javascript module.exports = { lintOnSave: false // 或者 true, "warning", "error" }; ``` ##### devServer 配置开发服务器的行为，比如端口号、代理等。 ```javascript module.exports = { devServer: { port: 8081, proxy: { '/api': { target: '<http://localhost:3000>', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` #### 修改插件配置对于像 DefinePlugin 这样的特定插件，可以直接访问并修改其配置[^3]。 ```javascript configureWebpack: config => { if (process.env.NODE_ENV !== 'development') { config.plugins.forEach(plugin => { if (plugin.constructor.name === 'DefinePlugin') { plugin.definitions['process.env'] = Object.assign( plugin.definitions['process.env'], { API_URL: JSON.stringify(process.env.VUE_APP_API_URL) } ); } }); } } ``` 也可以简化写法如下： ```javascript chainWebpack: config => { config.plugin('define').tap(args => { args[0]['API_URL'] = JSON.stringify(process.env.VUE_APP_API_URL); return args; }) } ```