vue引入图片报错？VueCli 关于静态资源(图片) 引入问题

最新推荐文章于 2024-08-16 10:29:15 发布
原创 最新推荐文章于 2024-08-16 10:29:15 发布 · 1.9w 阅读 · 58 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细介绍了在Vue-Cli项目中如何处理图片和背景图片的引入问题，包括相对路径和绝对路径的使用。对于动态属性，相对路径需借助require转换为模块，而绝对路径直接引用公共目录下的资源。同时，通过修改vue.config.js的publicPath可解决打包后静态资源路径问题。此外，展示了动态设置背景图片的方法，既可在内联样式中使用require，也可在CSS中直接引用public目录下的资源。

文章目录

一、关于Vue-Cli图片引入问题？

首先我们要清楚Vue-cli是基于Webpack来进行的打包，其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。
在这里插入图片描述

二、两种引入方式

简单的来说

一种是相对引入方式，一种是绝对引入方式

在这里插入图片描述

  • 相对引入：
 <img src="../assets/logo.png" alt="" />
  • 绝对引入：
  <img src="/images/logo.png" alt="" /> <!-- /单杠引入会去找public文件夹 -->

关于相对文件的话我们放到assets中，关于绝对文件的话我们去放到public文件中

此时我们都是采用的正常字符串引入格式，那么一旦我们如果想要写成动态属性呢？

我们可以尝试一下，先来看相对路径

  <img src=
最低0.47元/天 解锁文章
电脑 Vue 加载静态资源报错
TechRoar的博客
09-20 385
在 Vue 开发中，我们经常需要加载静态资源，例如图片、样式表或 JavaScript 文件。本文将详细介绍一些可能导致 Vue 加载静态资源报错的常见问题，并提供相应的解决方案。在 Vue 开发中，加载静态资源报错可能是由于资源路径错误、缓存问题、跨域问题或文件类型不支持等原因引起的。通过仔细检查资源路径、处理缓存、进行跨域配置和确认文件类型是否受支持，我们可以解决这些问题并成功加载静态资源。确保加载的静态资源文件类型是受支持的，并在服务器端进行相应的 MIME 类型配置。如有其他疑问，请随时提问。
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
总结以上知识点，当你在Vue CLI 3项目中遇到public文件夹静态资源报错的问题时，应该首先检查你的资源引用路径是否正确。根据你的项目部署路径，设置合适的`process.env.BASE_URL`环境变量，然后通过`vue.config.js`...
Vue项目中直接引入图片报错（404 Not Found）
weixin_71962268的博客
10-22 3332
在view项目中引入图片，无法在网页上显示控制台报告404 not found的错误时的三种解决方法。 方法一：在src的static文件夹中，把需要用到的音频或图片放里面 更改路径 刷新 视频和图片正常显示和播放。 方法二：在src的assets文件夹中，把需要用到的音频或图片放里面 更改路径 突然报错了 这里报错的原因是使用了相对路径 修改路径就可以了 方法三：图片在/public目录下，把图片或音频放到与index.ht
vue 引入图片出现错误 Cannot find module ‘./XXX.jpg‘e
Python-PTA操作
11-05 1895
vue 引入图片出现错误 Cannot find module ‘./XXX.jpg‘e
【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
m0_69892739的博客
12-25 8256
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
vue中引入图片报错Cannot resolve file ‘bg.png‘
Mmj_mmj的博客
01-26 1270
Cannot resolve file 'bg.png'
vue引入图片bug
weixin_44362304的博客
11-20 240
因为通过require方法拿到的文件地址，是资源文件编译后的文件地址（dist下生成的文件或base64文件），因此可以找对应的文件，从而成功引入资源。动态添加的src最终也会编译成一个静态的字符串地址，程序运行时，会按fff照该地址去项目目录中引入资源，即也是将该资源当成了静态资源。，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。，web服务器从内部取到相应的文件，返回给客户端，客户端解析并渲染显示出来。客户端请求的动态资源，先将请求交于。
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
解决vue打包之后静态资源图片失效的问题
11-27
在Vue项目开发中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，部署到服务器上时，部分静态资源，如图片，无法正常显示，浏览器控制台报404错误。这个问题主要与静态资源的存放位置及引用路径...
解决vue 项目引入字体图标报错、不显示等问题
10-18
在Vue项目中，引入字体图标是一项常见的操作，但有时可能会遇到一些问题，如报错或图标不显示。本文将详细解析这两个问题的原因及相应的解决策略。 首先，问题一：字体图标报错。当我们在Vue项目中尝试引入字体图标...
解决vuejs项目里css引用背景图片不能显示的问题
12-12
解决：build->utils.js里，修改：增加 publicPath:'../../', if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也
前端vue-cli项目中使用img图片和background背景图的几种方法
12-30
前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. css方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹. <div class=bgImg></div> <style> .bgImg{ background-image:url(@/../static/images/logo.png) } </style> import方法 使用import导入背景图片 import
解决vue 直接图片引入报错问题
mentalitys的博客
01-08 2492
废话少说了，直接上代码 <div class="login_title"> <img :src="logo" class="mk_logo" /> </div> //方法1.直接将图片引入为模块 require imageSrc from "../assets/logo.jpg" //方法2.把图片放在数据中 export default { name: 'HelloWorld', data () { return { ..
vue 引入图片的问题
全网同名：PBitW！ 可以去掘金关注我！
05-15 2114
为什么使用require 自己讲解 实例 - src下 - img 验证 实例 - public下 - 绝对路径 - img 报错，其中 imgurl5、imgurl6 找不到资源！ 去掉 imgurl5、imgurl6 再次运行（开发环境）： 去掉 imgurl5、imgurl6 再次运行（生产环境）： 发现 /static 这种写法生产环境并不正确 实例 - public下 - 相对路径 - img 结论 实例 - public下 - 背景 报错 bg2 的图片找不到 去掉 bg2 再次运行（开发环境）
vue | require动态加载图片及遇到的报错
weixin_44864257的博客
04-26 2178
2. require不能用纯动态地址，必须要有图片的 路径+名称+后缀。2. 视图加载的时候未拿到数据，可以用v-if判断一下。（require是node用来加载并执行其它文件导出的模块的方法。结果图片无法显示，遇到了以下提示，而且获取图片名字还需要截取。使用require将url转为base64。1. 查看图片路径是否写错。在弹窗用以上操作的时候出现以下报错。1. 把图片数组改为图片名字。
vue中src中图片引入失败问题及解决方案
qq_56144522的博客
08-16 609
在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。首先请看图，通过url引入src下asset中point图片，发现页面并不显示marker标记点，图片地址也是正确的，为什么会加载不出来。图片通过import引入 保证图片是被加载，同时把值赋给url， 这样无论是在开发环境还是打包环境都可以进行正常访问。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。vite官方的解释是。
vue 图片加载及报错解决
LuckyisLhh的博客
01-26 1190
vue 图片加载
关于vue CLI框架中的图片路径报错的解决（ GET http://localhost:8081/src/assets/images/cellphone.png 404 (Not Found)）
qq_74916452的博客
01-01 4262
然而，当Vue.js尝试加载这个路径时，它可能无法找到图片，因为这是相对于当前文件的路径，而不是相对于打包后的应用程序的路径。这个问题的原因是Vue.js在处理<img src>的路径时，默认使用的是Webpack的资源定位规则。在 Vue CLI 项目中，你通常会在项目的 Webpack 配置中看到这样的设置，它告诉 Webpack 把。今天在做项目的时候发现了一个问题，我在循环一个数组对象导入图片的时候报错了。这是我自己在开发项目中遇到的小问题，希望这篇文章能帮到也遇到跟我一样问题的同学！
vue项目引用本地图片出现错误解决办法
weixin_52113401的博客
07-28 649
首先保证引用地址没有错误但是效果一直不出来，但是单个img标签引用可以但是动态绑定父传子传过来的图片本地地址页面不显示 在父组件中用 img:require("子组件的引用地址")
若依vue2 图片放在组件文件夹中，显示正常，代码引入报错
最新发布
04-20
<think>嗯，用户的问题是，在若依框架中使用Vue2时，图片放在组件文件夹里显示正常，但代码引入时报错。我需要先理解具体情况。首先，图片在组件文件夹里显示正常，说明路径可能没问题，但代码引入时出错，可能涉及路径别名、构建配置或引用方式的问题。 参考用户提供的引用，比如引用[3]提到的文件名大小写问题，但用户的问题是关于图片的，可能不直接相关。但可以考虑路径大小写的问题。不过更可能的是路径别名配置的问题，因为若依框架可能配置了特定的别名，比如@指向src目录。用户可能在代码中使用相对路径，而构建时路径解析不一致。 另外，引用[1]中提到组件循环引用的问题，但用户的问题是关于图片的，所以可能不适用。不过可以想到，图片的引用方式是否正确，比如在Vue中使用require或正确的静态资源处理方式。 可能的解决方案包括检查路径是否正确，使用正确的别名，或者在webpack配置中添加对图片文件的支持。例如，若依框架可能使用vue-cli，需要确保图片放在assets目录下，或者正确配置loader处理图片。 还需要考虑开发环境和生产环境的路径差异，可能需要使用~@或正确的别名前缀。另外，检查报错信息的具体内容，比如是否提示找不到模块，可能需要使用require或import语句正确引入图片。 总结一下，可能的解决步骤是：1.检查路径是否正确使用别名；2.确认图片存放位置是否符合规范；3.调整引用方式，使用require或正确的静态资源处理；4.检查webpack配置，确保处理了图片文件；5.清理缓存重新构建。</think>### 若依Vue2图片引入报错解决方案 #### 问题定位 在若依Vue2框架中，图片放在组件文件夹下显示正常但代码引入报错，通常由以下原因导致： 1. **路径别名未正确配置**：若依默认使用`@`指向`src`目录，但组件内路径可能需特殊处理 2. **构建工具解析差异**：开发环境与构建环境对相对路径解析方式不同 3. **静态资源处理规则限制**：Vue Loader对非`assets`目录资源处理存在限制 #### 分步解决方案 1. **规范存放位置** - 将图片移动到标准目录：`src/assets/images/` - 组件目录建议只存放`.vue`文件与配套的`.js`/`.scss`文件 2. **使用路径别名（推荐）** ```vue <!-- 组件中使用 --> <img :src="require('@/assets/images/photo.jpg')"> ``` ```javascript // JS代码中引用 export default { data() { return { imgUrl: require('@/assets/images/photo.jpg') } } } ``` 3. **配置vue.config.js** ```javascript // 添加webpack配置 module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('url-loader') .loader('url-loader') .tap(options => ({ ...options, esModule: false // 解决require报错问题 })) } } ``` 4. **检查构建配置** - 确认`vue.config.js`中是否配置了`publicPath` - 检查`router/index.js`中是否设置了`base`参数影响路径解析 5. **处理大小写敏感问题（参考引用[3]）** - 确认文件名实际大小写与代码引用完全一致 - 建议统一采用全小写命名（如`user-avatar.jpg`） 6. **清理缓存重建** ```bash rm -rf node_modules/.cache npm run dev ``` #### 注意事项 1. 生产环境部署时需确保服务器配置正确的静态资源路径 2. 若使用CDN需同步调整`publicPath`配置 3. 大文件建议通过`public`目录引用（需注意缓存策略） #### 典型报错处理 - **`Module not found`错误**：检查路径别名是否正确使用`@` - **`404 Not Found`错误**：确认构建后的`dist`目录中图片是否被正确复制 - **`Undefined variable`错误**：确保在JS中使用`require()`包裹路径
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值