vue项目静态图片不显示

最新推荐文章于 2024-01-24 16:02:44 发布
最新推荐文章于 2024-01-24 16:02:44 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuanyuyao/article/details/108583013
版权

vue项目静态图片不显示
1、解决方式一
在data里使用require导入静态图片再使用
在这里插入图片描述
2、方式二直接在img标签src里写入相对地址在这里插入图片描述

解决vue打包之后静态资源图片失效的问题
11-27
1、问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2、解决方法之一 静态资源static存放位置放在src目录下   你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的   实践证
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
vue静态图片不显示的问题
肥晨开发的学习之路
05-29 578
在写vue的时候，会发现有的时候想要展现一些静态图片。 例如头像一般都是从后端拿，不用静态的，一般都是一个网络地址http://...png。赋值即可使用，但是静态得用require转一下。 不可以使用相对路径，要使用绝对路径 使用方式： photo:require('../abc/a.png') ...
vue中图片不显示问题 - vue中静态资源加载
最新发布
好好学习天天向上
01-24 4231
变量的值，该变量的值就是一个字符串，所以最后显示的是字符串没有解析地址去获取图片。是一个 ESM 的原生功能，会暴露当前模块的 URL。require是在运行时加载，import是编译时加载。中会将图片来当做模块来用，因为是动态加载的，所以。为了能让Webpack返回正确的资源路径，使用。根据结果来看，相对地址没有被解析。这里的错误原因理解的是动态绑定。进行解析，然后返回处理过的。进行解析，然后返回处理过的。解析到的路径都会被解析为。提供的一种加载能力，但是。提供的静态资源载入方法，
vue中无法访问静态资源
qq_45555170的博客
12-18 3708
vue中无法访问静态资源原因：解决看看效果 原因： 主要是项目的图片没有放到正确的路径之下，就基本上会出现vue访问不到静态静态资源的问题 解决 将所需要的图片放到static中就可以了，在读取对象的属性的时候只需要把照片的路径写准确即可，可以直接写路径访问到 在 static/img/ 后面直接加图片名称.这样项目中就能访问到了 大致就是一个这样的路径 看看效果 这样就能访问vue项目中的静态资源了 ...
关于vue无法显示静态文件和背景图片问题
qq_30302325的博客
06-17 1551
1.无法加载静态文件： 在webpack.prod.conf.js 中output添加参数publicPath:'./' 2.无法加载背景图片： 1.在build文件夹里面的utils.js文件 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../',//...
解决Vue打包后访问图片/图标不显示的问题
10-16
在开发Vue应用的过程中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，在线上环境运行时，图片和图标的资源无法正常显示。这个问题主要是由于打包过程中的路径问题导致的。以下将详细介绍如何解决...
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
本文主要探讨了在Vue项目开发中遇到的一个常见问题——动态加载的图片在跨域环境下无法正常显示的问题。这个问题的根源在于浏览器安全策略限制，导致前端应用无法直接从不同源（域名、协议或端口）的服务器上加载...
vue 解决data中定义图片相对路径页面不显示的问题
10-14
补充知识：在Vue项目中，如果配置了Webpack的别名（alias），那么在引用静态资源时可以使用别名来简化路径。例如，配置了 `'assets': resolve('src/assets')` 这样的别名，我们可以这样引用图片： 在HTML中： ```...
VUE动态绑定静态资源中的图片不显示
weixin_44968219的博客
07-25 824
VUE动态绑定静态资源中的图片不显示 ·需求：根据不同的路由渲染不同的导航栏(以下为更改前后部分代码)，需要使用require引入静态资源中的图片 ·prev <template> <div class="rootItem" v-for="(item,index) in sideBarList" :key="index"> <h3 @click="$router.push(item.path)"> <span>
vue打包后静态资源或图片无法访问,vue打包后html一片空白
khbilhjknkjb的博客
09-15 1828
@[TOC](vue打包后静态资源或图片无法访问,vue打包后html一片空白 1.更改配置文件资源路径 2.将所有的.jpeg类型的图片改成png或者jpg 希望对你有所帮助
vue 直接访问静态图片_如何解决vue打包项目中的图片,静态css,js 不能访问路径问题...
weixin_31001313的博客
01-12 684
1.在书写代码的时候按照相对路径引入；但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的；实际写的代码 export default {}.logo {width: 200px;height: 200px;background: url(../assets/images/logo.png) center center;}3.webpack 打包编译后的路径是这样...
VUE脚手架引入静态资源图片出问题解决方案
qq_54896194的博客
07-16 671
我在做有关vue脚手架的项目的时候发现，静态资源图片导入的时候总是出现问题。发现自己的图片导入总是不显示。
【Vue 踩坑】本地静态图片加载失败问题
a792245795的博客
11-15 1505
使用原生img标签，src用v-bind动态绑定本地的url，由于图片放在了assets文件夹下。 加载不出来，也尝试了网上require或import的方法，但是没有起作用，后来把图片放在static下，改目录为 <img class="img" src="/static/logo.png"> 遂好了，具体原因，日后再查。。。。。项目要延期了。。。。 参考 https://blog.csdn.net/JellyFishDing/article/details/104445647 ...
vue打包之后静态资源图片失效问题
热门推荐
纸上得来终觉浅，绝知此事要躬行
04-13 4万+
1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入 的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2.解决方法之一 静态资源static存放位...
vue部署项目之后，无法访问到静态资源（图片）
简的博客
06-29 1万+
首先参见如下帖子：https://blog.csdn.net/qq_39480597/article/details/79568173， 这个算是系统的管理了静态资源资源问题，适合大部分静态资源访问不到的情况，但是觉得很繁琐，我这边没有用，我下面列出一种，只有一两张图片访问不到的情况 我这边是访问图片出现了问题，而且只有一张，是通过new 出来的image对象，原始代码如下 // js操作dom，...
VUE在data中引入静态图片资源不显示
qq_40740326的博客
03-29 1057
BASE_API: process.env.VUE_APP_BASE_API, // 接口API地址。subjectParentId:'',//一级分类id。subjectId: '',//二级分类id。teacherList:[],//封装所有的讲师。subjectOneList:[],//一级分类。subjectTwoList:[]//二级分类。// 图片路径，static放在src路径下。-- 课程封面-->
(vue):src图片不显示解决办法
nyf_unknow的博客
05-26 5037
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。
vue项目部署图片显示不出来
06-11
这个问题的原因可能有很多种，但是常见的原因包括以下几点： 1. 图片路径不正确：请确保你的图片路径是正确的，特别是在部署到服务器时，路径可能会有所变化。 2. 服务器没有开启静态资源访问权限：在服务器上部署 Vue 项目时，需要确保服务器开启了对静态资源的访问权限，否则图片无法正常显示。 3. 图片大小超出限制：有时候图片大小超过了限制，在部署时可能无法正常显示。请确保你的图片大小不超过限制。 4. 代码中未正确引用图片：请确保你的代码中正确地引用了图片，特别是在使用相对路径时，需要确保路径的正确性。 如果以上这些方法都不能解决问题，你可以查看浏览器的控制台，看看是否有相关的错误提示，以帮助你找到问题的原因。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值