Vue引入静态文件失效的问题

最新推荐文章于 2024-04-29 11:50:43 发布
最新推荐文章于 2024-04-29 11:50:43 发布
阅读量279 收藏
点赞数 1
分类专栏： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44868025/article/details/116523906
版权
js 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
vue
23 篇文章 0 订阅
订阅专栏

在这里插入图片描述
比如：在页面上写<el-img :src=“item.img”></el-img>，如果item.img为“@/icons/glowworm/1.jpg”，则还是会样式不生效的奥！，在data中写require才会生效。
或者<el-image :src=“require(’@/icons/glowworm/1.jpg’)”></el-image>

今昭昭昭
关注
专栏目录
解决vue打包之后静态资源图片失效的问题
11-27
1、问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2、解决方法之一 静态资源static存放位置放在src目录下   你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的   实践证
vue动态更改样式不能即时生效的问题
最新发布
m0_46893049的博客
08-08 248
绑定的动态样式方法中，若要使用DOM方法获取页面元素的宽高等样式属性，就必须加定时器或者使用。，而是写一个方法，在需要的地方去主动调用（需要加定时器），下面给出示例。，但若如此，样式就不生效了。解决方案：不再绑定动态样式。
image动态获取本地静态文件的不同图片路径 vue实现
Laladoge的博客
11-17 1311
有个需求，布局：左边一个小图标，右边对应商品描述。不同图片对应不同文字。后端不返路径的情况下，前端从静态文件夹获取图片 用if else 写，页面不好看 做法： 1.在img 绑定一个方法getpic ，方法传的参数是商品的id号。 2.静态文件夹中图片的名字为对应的商品的id 代码实现： <img class="product_ico" :src="getpic(mydata.GoodsValue)" /> js部分： getpic(GoodsValue) {
el-image里面调用assets静态图片资源
zhangyr的博客
02-22 972
注：require在vue3+vite中不支持。2.import引入，具体写法有两种。1. 使用require引入。
el-image 加载静态图片报错 el-image如何加载本地图片
qq_27806371的博客
04-29 460
el-image 加载静态图片报错 el-image如何加载本地图片
vue打包后el-image图片不出来
墨迹斑斑的老墙
12-17 1705
图片路径问题
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在遇到Vue在`index.html`中引入静态文件不生效的问题时，首先要检查静态文件是否位于`static`目录下，如果不是，需要将其移入或调整配置。其次，确认静态资源目录是否与配置文件中的设置一致，如果不一致，应相应地...
解决Vue打包之后文件路径出错的问题
08-27
在Vue.js应用开发中，经常会遇到一个问题：当项目完成并使用Vue CLI进行打包后，文件路径可能会出现错误，导致资源加载失败。这个问题通常涉及到静态资源的路径设置，尤其是在从开发环境转移到生产环境时。本文将...
静态html引入vue文件不生效,vue在index.html中引入静态文件不生效问题及解决方法...
weixin_35589827的博客
07-08 3342
本文针对的是Vue小白，不喜勿喷，谢谢出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html)出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static第二种可能出现的原因就是有单独的静态资源...
vue，el-image 图片引入根路径@无效
北海_南风
07-18 1758
用于引入模块、JSON、或本地文件。可以从node_modules引入模块。require是运行时调用，所以require理论上可以运用在代码的任何地方。图片在根路径下，如下引用图片路径发现无效，图片显示“加载失败”这样就能正常引入图片了。...
在使用img标签的src属性引用网络图片资源时加载图片失败的问题
VVVinegar的博客
01-24 1万+
问题如标题，以简单代码演示：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="http://p1.so.qhmsg.com/t01f77e838597537491.gif"> <
Vue环境下el-image图片动态加载失败问题
zhou_xiaozhou的博客
03-29 9083
但是结果还是差强人意，后来发现问题在require里面必须是一个静态路径，不能是一个变量，最终解决办法是。只要用字符串与变量拼接的方式就可以解决，查了资料，本质上是静态资源跟动态资源的区别......最开始的需求类似上图，在v-for中实现图片显示，但是实际得到的效果是。查了以后发现，如果要实现动态加载图片，应该用require包裹住路径。
Element el-image 加载本地图片
cimbala的博客
05-16 8066
代码： <el-image :src="require('@/static/iconlibrary/allorders.png')" fit="contain"></el-image> 加载失败问题：   如果页面没有显示图片，检查一下自己是不是按需引入Element组件，忘记在main.js里面引入Image组件。 import { Button,Image } from 'element-ui'; import 'element-ui/lib/theme-chalk/index
vue使用element-ui的el-image的src问题
絔宝的博客
10-04 5431
vue使用element-ui的el-image的src问题。vue静态获取本地资源图片文件。
【Vue】vue中img的src属性绑定问题
热门推荐
Y.Cheng的博客
07-31 12万+
问题：img的src属性填写的图片地址，可以正常渲染，但是一旦利用绑定:src属性的时候，图片就加载失败了 需求：鼠标移入切换图片 上一位前端小哥哥，没做这个交互，我接手后加上去，很简答的交互，我替换图片的时候准备三元判断，src需要属性绑定，于是发现同样的地址，我放上去图片就是加载不出来，图片加载不出来，那肯定是地址问题了（插一句：上一位大佬文件结构可能不规范），一般都是static存放...
使用el-image引入相对路径的图片报错
my466879168的博客
07-23 6524
在vue中使用elementui中的组件el-image引入相对路径图片报错的解决办法 原因：assets目录下的资源文件引入错误是因为在使用webpack打包的时候路径发生了变化，并且文件名也会改变 只有public文件夹下的文件是原样打包的不会改变 使用的时候通过require引入即可 <el-image src="require('../../../assets/img/xxx.jpg')"></el-image> 或者在data中定义： data(){ return {
vue引入html静态文件
07-28
在Vue中引入HTML静态文件可以使用`v-html`指令。首先，确保你的HTML文件已经放置在Vue项目的静态资源目录中，通常是`public`文件夹。然后，在Vue组件中使用`v-html`指令来渲染HTML内容。 以下是一个示例： 1. 将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值