vue上线后图片不显示_vue页面中图片不显示解决

最新推荐文章于 2024-08-24 16:03:13 发布

北京海淀区一女的

最新推荐文章于 2024-08-24 16:03:13 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue上线后图片不显示

本文链接：https://blog.csdn.net/weixin_26976635/article/details/112888977

在Vue项目开发中遇到图片无法显示的问题，表现为网络资源状态码为200但页面不显示。解决方法包括在webpack配置静态资源路径，以及在代码中引用图片的不同方式，如直接输入路径、使用require或模块化导入。此外，文章还提及了Vue中v-for和v-if更新问题的解决技巧，以及js获取页面图片数量的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做新版组态界面的时候，用vue框架实现，在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来

现象：

network页面资源也不报错,而且状态码竟然还是200，点preview里面又什么都没有，后面一输入，发现随便输入什么字都是出现的200

解决办法：

在webpack里面配置静态资源的路径

1、找到vue.config.js

2、在module.exports下面的devServer里面添加一个键

contentBase:path.join(_dirname,'src')

这句话的意思就是，webpack-dev-server 会使用当前的路径作为请求的资源路径

关于 contentBase，参考文章

静态资源：

方法一：直接输入路径

方法二：使用 require

import logoUrl from './top-logo.png'

const Images = {

logoUrl

}

export default Images

方法三：模块化

import logoUrl from './top-logo.png'

const Images = {

logoUrl

}

export default Images

使用：

js:

import Images from './assets/images'

html:

VUE项目中使用this&period;&dollar;forceUpdate()&semi;解决页面v-for中修改item属性值后页面v-if不改变的问题

VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

html2canvas页面截图图片不显示

前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...

js获取页面中图片的总数

查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码:

我的Android最佳实践之—— ImageView中图片拉伸显示

通过设置android:scaleType="fitXY"使得图片拉伸显示.补充:scaleType的属性有matrix(默认).center.centerCrop.centerI ...

随机推荐

Algorithm | Binary Search

花了半天把二分查找的几种都写了一遍.验证了一下.二分查找的正确编写的关键就是,确保循环的初始.循环不变式能够保证一致. 可以先从循环里面确定循环不变式,然后再推导初始条件,最后根据循环不变式的内容推导 ...

scp 从远程拷贝文件不需要密码

执行这一句,弹出来要你输入密码,输入一次后,以后再 scp 远程机的文件再也不需要密码了 ssh-copy-id myusername@8.8.8.8

如何用分析函数找出EMP表中每个部门工资最高的员工

EMP表是Oracle测试账户SCOTT中的一张雇员表,首先,我们来看看emp表的数据 SQL> select * from emp; EMPNO ENAME JOB MGR HIREDATE ...

解决WordPress后台安装主题、插件图片不显示的问题

今天搭建wordpress发现现在主题的时候预览图片都没有了,于是搜索了一下,发现下面的这个方法确实管用,于是转载收藏. 有在WordPress后台安装主题.插件的小伙伴可能会遇到主题.插件图片不显示 ...

[转]Hadoop YARN任务提交流程

Yarn是随着hadoop发展而催生的新框架,全称是Yet Another Resource Negotiator,可以翻译为“另一个资源管理器”.yarn取代了以前hadoop中jobtracker ...

SQL Sever MYSQL 视图实现的 2 种方式

前期准备: 1.create table person # 假设这张表用来收录所以有地球人的基本信息. (ID bigint , Name varchar(16), Country varchar( ...

字符编码介绍及java中的应用

字符编码,就是对日常的控制符号.文字和常用符号的二进制表示.为了准确的表示如何编号,怎么生产八位字节流,Unicode Technical Report (UTR) #17提出现代编码模型的5个层次: ...

C&num;多线程之旅~上车吧？

前言:前几天,写了一篇关于多线程使用的文章,[线程使用]用法得到不少博友的好评,博主这几天加班写文章,把剩下的高级使用给写完,期望可以得到博友的追赞吧,那么废话不多说,开始我们的C#高级用法之旅!! ...

02Lua入门

前言: 语言学起来其实相似点很多,简单整理的知识点目录: 1.使用控制台 2.Lua基础 3.变量 4.运算符 5.控制结构 1.使用控制台 Lua脚本是包含一系列Lua命令的简单脚本(扩展名为.l ...

jQuery常用的取值或赋值的方法

$(selector).data(name) 从被取元素返回附加的数据存在一个div标签: