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

现象:

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

解决办法:

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

   1、找到vue.config.js

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

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

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

关于 contentBase,参考文章

https://www.jianshu.com/p/e547fb9747e0

静态资源:

方法一:直接输入路径

<img class="sys_logo" src="./assets/images/top-logo.png"/>

方法二:使用 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:
<img class="sys_logo" :src="Images.logoUrl" />
 

vue页面中图片不显示解决的更多相关文章

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

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

  2. html2canvas页面截图图片不显示

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

  3. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  4. 钉钉登录二维码嵌套在vue页面中

    转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html 钉钉登录二维码嵌套在vue页面中 2021-09-04 14:42 ...

  5. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  6. Vue 动态控制页面中按钮是否显示和样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  8. 页面中图片以背景图形式展示好还是以img标签形式展示

    img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...

  9. JSP页面中的时间显示问题

    在JSP页面中往往要将时间显示为指定格式的,如果传入的是Date类型很好解决 <fmt:formatDate value="${orderTime}" pattern=&qu ...

随机推荐

  1. Android:JNA实践(附Demo)

    一.JNA和JNI的对比   1.JNI的调用流程 Android应用开发中要实现Java和C,C++层交互时,想必首先想到的是JNI,但是JNI的使用过程十分繁琐,需要自己再封装一层JNI接口进行转 ...

  2. Android中代码优化

    两个基本准则: 1.不要做冗余的工作 2.尽量避免次数过多的内存分配操作 Handler和内部类的正确使用 正确使用Context 正确使用Java四种引用方式:软引用,弱引用,虚引用,强引用 避免创 ...

  3. HTTP状态码分类及异常状态码处理

    1xx:表示临时响应100:(继续)请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分101:(切换协议)请求者已要求服务器切换协议,服务器已确认并准备切换 2xx:表 ...

  4. WebXML部署服务

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...

  5. 图解Go协程调度原理,小白都能理解

    阅读本文仅需五分钟,golang协程调度原理,小白也能看懂,超实用. 什么是协程 对于进程.线程,都是有内核进行调度,有CPU时间片的概念,进行抢占式调度.协程,又称微线程,纤程.英文名Corouti ...

  6. Python multiprocess模块(上)

    multiprocess模块 一. Process模块介绍 1. 直接使用Process模块创建进程 (1)主进程和子进程 (2)if __name__ == "__main__" ...

  7. .Netcore 2.0 Ocelot Api网关教程(2)- 路由

    .Netcore 2.0 Ocelot Api网关教程(1) 路由介绍 上一篇文章搭建了一个简单的Api网关,可以实现简单的Api路由,本文介绍一下路由,即配置文件中ReRoutes,ReRoutes ...

  8. 前台请求响应json

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. python3速查参考- python基础 2 -> if语句应用 + while循环应用

    if语句应用之——求最大值 """ 求三个数字中的最大值,并打印出来 """ a = int(input("a:")) ...

  10. 《精通并发与Netty》学习笔记(05 - Google Protobuf与Netty的结合)

    protobuf是由Google开发的一套对数据结构进行序列化的方法,可用做通信协议,数据存储格式,等等.其特点是不限语言.不限平台.扩展性强 Netty也提供了对Protobuf的天然支持,我们今天 ...