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 类型配置。如有其他疑问，请随时提问。
VueCLI 引入图片的3种方式（public、assets、require）
m0_60970928的博客
11-07 1356
在引入的文件中调用require()方法引入对象即可。（可以是任何类型，字符串，变量，对象，方法），在导出的文件中定义,导出的对象的类型不予限定。
vue 中image引入图片或者svg失败
weixin_50639469的博客
12-28 2057
1.引入图片失败 可以通过import导入 然后将它变成data中的数据,再在img中绑定 <template> <img :src="imgUrl" alt="" class="login-image" /> </template> import img from '../../assets/images/login/base_copy.png'; <script> export default { data(){ return { img
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-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
总结以上知识点，当你在Vue CLI 3项目中遇到public文件夹静态资源报错的问题时，应该首先检查你的资源引用路径是否正确。根据你的项目部署路径，设置合适的`process.env.BASE_URL`环境变量，然后通过`vue.config.js`...
解决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中引入图片报错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 直接图片引入报错问题
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 图片加载
若依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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

归来巨星

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

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

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

打赏作者

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

抵扣说明：

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

余额充值