Vue 动态引入图片报错: Error in render: “Error: Cannot find module ‘./avatar.png‘“

最新推荐文章于 2023-05-03 15:28:12 发布
最新推荐文章于 2023-05-03 15:28:12 发布
阅读量1.2w 收藏 11
点赞数 12
分类专栏： Vue 文章标签： vue html image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40314318/article/details/115319518
版权
问题原因

图片路径是一个变量, 要使用 require 引入图片.

正常在页面引入 图片是可以正常显示, 路径是被 loader 处理过的

正常页面路径引入

在这里插入图片描述

使用变量

在这里插入图片描述
上面两种方法都是正常显示.
在这里插入图片描述

如果根据数据来引入图片就会出现问题
模拟 变量<这个变量是相对路径>引入

我把这个变量放到 created 声明周期中演示一下
在这里插入图片描述
这个时候页面就会报错

报错原因: require 里面必须是一个路径, 现在变量是字符串格式.

在这里插入图片描述

正确的引入方式

图片变量不使用 路径, 而使用图片的名称
require 路径使用拼接的方式, 前面使用图片文件夹路径, 后面拼接图片名称. 和后缀
在这里插入图片描述
在这里插入图片描述

我看刑
关注
  • 12
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
专栏目录
React(jsx)中 require(''xx.png) 报错 Cannot find module './xx.png' 或 img src '[object Module]'
m0_37148591的博客
03-31 3247
前言 日常积累，欢迎指正 正文 error react(jsx)中 require(''xx.png) 报错 Cannot find module './xx.png' 解决办法 url-loader 配置添加 option.esModule = false 即可，我的完整配置 module.exports = { module: { rules: [ { ...
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Cannot find module ‘./@/assets/banner.png‘
259的博客
01-17 2686
Cannot find module './@/assets/banner.png' 报错
解决：[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘matched‘)“
weixin_71403100的博客
05-03 1万+
出错的代码尝试访问一个叫做'matched'的属性，但是该属性所属的对象是undefined，导致抛出了TypeError异常。我是在App组件中使用了router，在main.js中引入和注册router的，检查发现在main.js中引入和注册的是。这个错误表示，App组件在渲染过程中尝试访问一个未定义的属性或方法，例如访问一个空对象的属性或调用一个未定义的函数。在main.js中引入和注册router，如下是正确写法👇。检查代码中是否有未定义变量或者空对象的情况👇。routes，并非router。
Vue在v-for循环中动态加载相对路径图片，Error: Cannot find module ‘xxx‘的问题
如需咨询可联系我，V：chen2318341674
01-29 1962
Vue在v-for循环中动态加载相对路径图片，Error: Cannot find module 'xxx’的问题； 通过v-for来循环图片（图片是在当前项目内-相对路径） 先贴出正确的代码 <template> <div style="font-size: 0.15rem;"> <div class="tab"> <img :src="item.url" v-for="item in imgs" /> </div&gt
vue警告 [Vue warn]: Error in render:
weixin_45359072的博客
05-29 3876
错误截图： 错误代码： <template> <div class="food-type"> <div class="type-list"> <h4>产品分类</h4> <small>Food Types</small> <ul class="type-list-ul"> <li class="type-sel type-list-li" v-for="(food
vue动态加载图片问题，报错Cannot find module "."
风华绝代的博客
04-02 1万+
正常在<img>标签加载图片的方式是 <img src="../assets/product2.jpg" alt=""> 但是在vue中动态加载图片，直接用src是无效的，需要使用v-bind动态加载 <img :src="product.imgSrc" alt=""> //正确 <img :src="../assets/product2.jpg" a...
typescript项目中import 图片时报错：TS2307: Cannot find module ‘...’
weixin_55042716的博客
10-24 7562
如果在js中引入本地静态资源图片时使用import img from './img/bd_logo1.png'这种写法是没有问题的，但是在typscript中是无法识别非代码资源的，所以会报错TS2307: cannot find module '.png'。
报错：Error: Cannot find module
Cao_Mary的博客
11-11 6288
编写自定义执行指令时，写js文件第一行写执行环境 #! /usr/bin/env node // 执行环境 报错如下： internal/modules/cjs/loader.js:797 throw err; ^ Error: Cannot find module ‘C:*index鏂囦欢鍦╪ode鐜涓墽琛?’ ?[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)?[39m ?[9
【报错问题】Vue 运行时提示 Error: Cannot find module ‘chalk’
01-07
运行 'npm run build' 时，提示错误 Error: Cannot find module 'chalk' 三、解决办法 3.1、根据上诉提示，其实已经告诉了问题来源，本地没有 node_modules 包，需要先运行命令 npm install 进行安装 npm install...
npm run dev 报错 ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in
01-07
Alternatively, run 'webpack(-cli) --help' for ...ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\HBuilder\Vue\day07\test1' npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! test
Vue项目报错：Uncaught SyntaxError: Unexpected token
01-19
今天做一个 VUE 的项目，在引入第三方依赖的 JS 文件时，遇到了一个问题： 控制台的提示：Uncaught SyntaxError: Unexpected token < 按照提示进入文件，再看如下图： 仔细看了看 index.html 文件,发现原本我...
Cannot find module ‘xxx’，错误解决方法
01-08
vue-router.esm.js:1897 Error: Cannot find module '@/views/login/index' at webpackEmptyContext (index.js:39) at permission.js:90 解决方法 进入router中的index.js component: () => import('@/views/login/...
npm install 报错 error in cannot find module '……'
张兴华的博客
01-15 3187
npm install 时报错： error in cannot find module '……' 解决办法： 删除node_modules文件夹 重新npm install
Vue获取数据库图片不显示的问题
m0_51523539的博客
08-13 5123
记一次错误，弄了一天 这是从后台数据库传输过来的图片路径 这是axios接收后台数据的代码 这是F12里面的图片路径 然后显示是这样的 这是我显示的代码 我之前使用require对代码部分进行了修改，也就是 把 :src=“like.gImage” 改成了 :src=“require(like.gImage)” 但是报错误 [Vue warn]: Error in render: “Error: Cannot find module ‘…/…/assets/img/home/like1.jpg’” 于是我尝
vue项目Error: Cannot find module ‘xxx’类报错的解决方法
热门推荐
weixin_42216142的博客
02-13 16万+
项目中需要新下载一个插件，当时网络不是特别好，下载失败了，后来不知道怎么项目就跑不起来了。 运行cnpm install没问题，运行cnpm run serve就会报错： internal/modules/cjs/loader.js:583 [app-scripts] throw err; [app-scripts] ^ [app-scripts] [app-scripts] Error: Can...
vuejs使用vux出错Module build failed: Error: Cannot find module 'less'
Marswill
11-27 3万+
首先来说明使用场景和错误重现，因为vue使用中出错后对于新手来说定位错误是非常困难的一件事。 本次出错的使用场景是这样的： 使用vux来构建一个移动端的应用，在使用vux的loading来做页面切换中的loading时出现了如题所说的错误。 错误提示错误解释Module build failed: Error: Cannot find module ‘less’ 这句话不难理解，构建模
vue常见错误解决
编译的阿喵
06-10 8万+
Error in render: “TypeError: Cannot read property ‘list’ of undefined” [Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this proper...
【已解决】Could not find a declaration file for module ‘xxx‘. vue + ts
bao
03-02 3万+
问题 在 .ts 文件中引入三方模块报错. Could not find a declaration file for module 'lodash'. 'xxx/node_modules/lodash/lodash.js' implicitly has an 'any' type. Try 'npm i --save-dev @types/lodash' if it exists or add a new declaration (.d.ts) file containing declare module
我使用了该代码，但是报错[Vue warn]: Error in render: "Error: Cannot find module './~@/assets/img/maojianpng.png'" 请问怎么解决
最新发布
06-09
这个错误可能是因为 Webpack 在打包时无法正确解析图片路径，导致找不到图片。你可以尝试以下几个方法解决： 1. 检查图片路径是否正确，确保图片路径与你的项目结构匹配。 2. 在 Webpack 配置文件中，添加针对图片的 loader，例如 file-loader 或 url-loader，将图片打包到正确的位置。具体的配置可以参考以下代码： ```javascript module.exports = { // ...其他配置 module: { rules: [ // 添加针对图片的 loader { test: /\.(png|jpg|jpeg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, name: 'images/[name].[hash:8].[ext]' } } ] } ] } } ``` 3. 尝试使用绝对路径或相对路径引用图片，例如： ```html <img :src="require('@/assets/img/maojianpng.png')" /> ``` 或者 ```html <img :src="require('../../assets/img/maojianpng.png')" /> ``` 如果以上方法都无法解决问题，请提供更多的代码和报错信息，以便我更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值