vue中无法访问静态资源

最新推荐文章于 2024-06-19 16:59:45 发布
最新推荐文章于 2024-06-19 16:59:45 发布
阅读量3.6k 收藏 2
点赞数 3
分类专栏： SSM 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45555170/article/details/111354968
版权

vue中无法访问静态资源

原因：

主要是项目的图片没有放到正确的路径之下，就基本上会出现vue访问不到静态静态资源的问题

解决

将所需要的图片放到static中就可以了，在读取对象的属性的时候只需要把照片的路径写准确即可，可以直接写路径访问到
在这里插入图片描述
在这里插入图片描述
在 static/img/ 后面直接加图片名称.这样项目中就能访问到了
在这里插入图片描述
大致就是一个这样的路径

看看效果

在这里插入图片描述

这样就能访问vue项目中的静态资源了

@shirley
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot访问vue的html,Springboot中如何访问静态资源
weixin_33800074的博客
07-20 2098
1. application中需要先行的两个配置项1.1 spring.mvc.static-path-pattern这个配置项是告诉springboot，应该以什么样的方式去寻找资源。默认配置为 /* 。换句话说，只有静态资源满足什么样的匹配条件，Spring Boot才会处理静态资源请求比如下面这个配置spring.mvc.static-path-pattern=/soul/*问题1：配置这个...
vue项目部署服务器，static文件夹里文件路径不对报404
weixin_42981487的博客
10-12 4934
场景：vue项目本地运行正常，npm run build之后，将dist文件上传至服务器之后，在nginx配置完成情况下，访问域名出现 .js 、.css等静态资源文件访问404，导致访问页面空白。 原因：路径不对，找不到对应的static文件夹 方案： 有两种修改方式，一种是修改为相对路径，一种是修改为绝对路径。 以相对路径为例 解决方案： 将 ’ / ’ 改成 ’ ./ ’ 然后重新打包部署，访问就可以了。 参考于：vue 项目放在服务器上 静态资源路径不对报404错误_yongy.
vue本地运行项目获取static中文件找不到问题，更新不生效
最新发布
qq_35388369的博客
06-19 200
原因：由于运行配置了proxyTable代理 ‘/’，所有的网络请求都被代理，获取到静态文件实际上是代理服务器上的文件，所以本地修改static文件下的操作都不会生效。问题：vue本地运行项目，获取static静态文件夹中文件找不到，更新文件之后运行没有变化。解决办法：在全局代理’/'下，忽略掉static请求的代理。
Vue项目中的静态资源引入
sinat_29789933的博客
09-01 3347
项目中有时候需要引入静态资源，比如无需修改的js文件等，且无法npm获取，一般作为缓存的静态资源，会放在static文件夹下（放在其他文件夹下面会报错，直接报静态资源内部的错误，排查了一天。），在index.html中引入。assets在src文件夹下面，src里面的文件是参与打包的，所以一般项目中的资源会放在assets文件夹下，使用相对路径即可访问。VUE_APP_ASSETS是自己在.env文件中设置的，BASE_URL是项目自带的，我这里是Public。
Vue+Django访问静态资源问题
Q1070999087的博客
07-03 536
Django的TemplateView指向我们刚才生成的前端dist文件的小问题
vue部署项目之后，无法访问到静态资源（图片）
简的博客
06-29 1万+
首先参见如下帖子：https://blog.csdn.net/qq_39480597/article/details/79568173， 这个算是系统的管理了静态资源资源问题，适合大部分静态资源访问不到的情况，但是觉得很繁琐，我这边没有用，我下面列出一种，只有一两张图片访问不到的情况 我这边是访问图片出现了问题，而且只有一张，是通过new 出来的image对象，原始代码如下 // js操作dom，...
vue访问本地静态资源文件
陌桑楚客
09-29 6967
1、页面内 <ul class="xzlb"> <li v-for="(item,index) in manualList" :key="index" @click="downManual(item,index)"> <p>{{item.fileName}}</p> </li> </ul> export default { data() { return { man...
vue中实现动态引入静态资源
MMccGrady的博客
02-19 1662
小伙伴们在写代码的过程中大部分的资源都是从后端返回接受到的，如果遇到静态资源需要动态操作的情况下，很多小伙伴就不太熟悉了，今天分享一种刚学习到的方法
vue3调用静态资源
weixin_67471616的博客
04-20 663
考虑到vue3也兼容vue2语法，所以踩坑花了大量时间去解决这个问题，尝试了很多办法，最后终于试出来了，vue2和vue3在调用静态资源上是有一点差别的，vue2是通过webpack处理的static，vue3没有通过webpack，所以在导的时候就不能通过static去导，而是public，在调用的时候不要写文件名，直接写后面部分就能正常引入了。大概是资源没调用上，看了其他文章寻找解决办法，说的和webpack版本有关，跟着操作了下，所以这个问题很简单啦，不过第一次遇到花了太多时间，记录一下，避免踩坑！
vue项目中的静态资源处理
weixin_43182021的博客
01-02 3992
如图所示，一个vue项目结构如下： src下assets文件夹需要进过webpack打包，而static则不需要进行打包 一、将静态资源放到assets文件夹时 当我们把一些静态资源放到assets文件夹下时，我们需要用相对路径引入： &lt;div&gt; &lt;img :src="require('@/assets/img/1.png')" alt&gt; &...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
解决vue打包之后静态资源图片失效的问题
08-28
在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的出现主要是由于图片的引入路径和静态资源文件的...
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Artifact is deployed successfully项目部署成功，但访问自带的index页面没有反应
热门推荐
qq_45555170的博客
11-16 1万+
Artifact is deployed successfully项目部署成功，但访问自带的index页面没有反应原因解决 16-Nov-2020 09:27:32.350 信息 [main] org.apache.catalina.startup.Catalina.start Server startup in 84 ms Connected to server [2020-11-16 09:27:32,550] Artifact mybatis:war exploded: Artifact is bei
出现语法错误mybatis :Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:
qq_45555170的博客
11-09 6214
Error updating database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '　delete from t_book where boo
前言中不允许有内容
qq_45555170的博客
12-30 4362
错误显示 在Springboot整合mybatis的时候，运行自动生成映射文件的命令的时候，出现前言中不允许有内容 错误分析 首先我先检查了这个generatorConfig.xml配置文件，没有发现任何的错误，我的这个配置文件是从之前的项目复制过来的，也不存在说有错误，重新整理的一下思路，发现可能是因为我这个配置文件是复制过来的，前面会有一些看不到的字符编码读错的，所以我将这个配置文件直接删掉，然后重新保存，用utf-8的模式保存，再重新加载进来发现是没有错误的； 出现错误的主要原因就是在这个文件在读的.
@Cacheable和@CachePut区别
qq_45555170的博客
12-19 2595
@Cacheable和@CachePut一、相同点二、不同点 一、相同点 都是Spring的缓存注解 二、不同点 @Cacheable：只会执行一次，当标记在一个方法上时表示该方法是支持缓存的，Spring会在其被调用后将其返回值缓存起来，以保证下次利用同样的参数来执行该方法时可以直接从缓存中获取结果。 @CachePut标注的方法在执行前不会去检查缓存中是否存在之前执行过的结果，而是每次都会执行该方法，并将执行结果以键值对的形式存入指定的缓存中。 ...
vue怎么访问后端静态资源
03-08
你可以使用 Vue.js 的 axios 库来访问后端静态资源。首先，你需要在后端服务器上设置静态资源目录，然后在 Vue.js 中使用 axios.get() 方法来获取静态资源。例如，如果你的静态资源目录是 /static，你可以这样访问： axios.get('/static/myfile.txt') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); 这将返回 myfile.txt 文件的内容。你可以根据需要修改路径和文件名来访问不同的静态资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值