【webpack下css/js/html引用图片的正确方式】的更多相关文章

webpack下css/js/html引用图片的正确方式

在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助require和es6语法引入 <img src="${require('../../../../static_guojiang_tv/src/mobile/img/recharge/bg.png')}"> 2. 在css/vue组件中引用图片: 照常按照相对路径引用 css:…

CSS Image Sprite--网页图片应用处理方式

CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样 一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.客户端每显…

css sprite---css精灵网页图片应用处理方式分析

CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 1.CSS Sprites简介 加速的关键,不是降低质量,而是减少个数…

Xaml引用图片路径的方式

最近写代码的时候遇到过好几次引用某个路径下图片资源的情况,思索了一下,便将自己所知的在xaml里引用图片资源的方法写成了个小Demo,并完成了这篇博文.希望罗列出的这些方式能够对大家有所帮助. Xaml中引用图片资源的方式主要有两种:1.引用自己工程路径下的图片(包括根目录下的xaml引用根目录或者子目录下的图片,或者子目录下xaml引用根目录下或者其他子目录的图片):2.引用其他dll工程下的图片文件(同样也包括根目录或者子目录下的图片).下面就来看看所罗列的这些情况代码是如何完成的吧. 首先…

在vue.js引用图片的问题

<div id="img"> <img src="img.png" class="img"> </div> $(".img").attr("src",require("@/img.png")); 在vue里在js中引用图片必须加一个require关键字和在图片地址前面加@符号…

maven-replacer-plugin 静态资源版本号解决方案（css/js等）

本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号,防止浏览器缓存. 目录 1.解决方案 2.原始文件和最终生成效果 3.pom.xml 中插件添加 4.html中 css/js 文件引用规则 5.结语 1.解决方案 解决问题: 防止浏览器缓存,修改静态文件(js/css)后无效,需要强刷. 解决方案: 使用 maven 的 com.google.code.maven-replacer-plugin 插件, 在项目打…

vue.js 独立引用css文件图片路径错误

vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在css文件的图片地址都是错误的,默认延续了vue文件的图片引用方式 这里只需要修改一下build/utils.js文件的配置就可以单独设置扩展的css文件路径引用 重新编译后,此问题解决!…

css和js引用图片的路径问题

原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaScript文件,其中可能采用JavaScript代码生成html代码,由于生成的html代码是嵌入在引用该JS文件的页面中,因此,在描述相对路径时,应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径.例如,文档"/home/www/a/index.htm"中引用了JS文件&q…

WEB-INF目录下的jsp怎么引用外部文件：js，css等

在项目中,为了安全.我们通常会将jsp文件放在WEB-INF下面,对于放在WEB-INF下面的js或是css等资源文件.我们通常可以通过相对路径来引用,而如果是放在WEB-INF之外的js 或是 css文件,对它们的引用,则会要稍微处理下 -------------------jsp------------ <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding=…

【原】浅谈Firefox下的js、css、图片阻塞现象（一）

外部js文件阻塞body中的图片 以如下html为例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 外部JS文件阻塞图片 </title> <script src="https://95598.gd.csg.c…

webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl…

vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPublicPath: '…

vue-cli下面的config/index.js注解 webpack.base.conf.js注解

config/indexjs详解上代码: 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // 代理…

透过现象看webpack处理css文件中图片路径转换的具体过程

webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也包括css文件中图片资源的处理,那么webpack到底是怎么处理它的呢?笔者之前也遇到过类似图片路劲的问题,为此还写过一篇博文webpack生成的css文件background-image url图片无法加载.今天就来说说webpack是怎么处理css文件中的图片路径的,首先上一个具体的例子. 一个…

css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title&…

CSS+JS实现兼容性很好的无限级下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CSS+JS实现兼容性很好的无限级下拉菜单…

Spring MVC程序中得到静态资源文件css,js,图片

转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet:  程序代码 <servlet>   …

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误…

iis 发布asp.net mvc 网站时候js css 压缩问题，图片不加载问题

一.JS CSS 自动压缩问题 默认情况下mvc这个框架会把css,js文件压缩成一个js或者css文件,一会发现只有一个<link href="/Content/css?v=ji3nO1pdg6VLv3CVUWntxgZNf1zRciWDbm4YfW-y0RI1" rel="stylesheet"/>  和一个<script src="/bundles/modernizr?v=qVODBytEBVVePTNtSFXgRX0NCEjh9U…

asp.net MVC发布iis无法加载css,js和图片

今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual studio运行的时候就已经不能加载css和js文件,那种情况一般都是路径的问题,改下页面代码就行,网上教程不少,而这个其实是一个CMS的开源系统.Orchard,国庆实在无聊,就想玩下这个asp.net MVC框架的CMS,而且是微软推荐的开源CMS,提到了就来说说这个吧,和国内的其他CMS对比起来…

从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png

在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还好以前写的helloworld,还能用. 一.关于开发环境 eclipse-jee-neon-1a-win32 Jdk 1.8u112 (32位版本) SpringMVC 4.3.4.RELEASE apache-tomcat-8.5.8 二.helloworld.jsp文件中的引用的样式表为 st…

ThinkPHP的调用css,js和图片的路径

按网上的说法,在根目录下建了一个Public目录,把css,js和图片放到Public目录下,然后用__PUBLIC__/...或__ROOT__/Public/...调用.但是发现无论如何改路径都无法调用.改成绝对路径也不行,貌似ThinkPHP不能用绝对路径. 弄了好几个小时,终于找出问题所在.原来是我的服务器的根目录下放了多个网站(每个网站放在一个文件夹),而__ROOT__得到的路径却是服务器的根目录(即apache里所设置的服务器根目录),而我这样写则是认为__ROOT__所代表的目录…

CI框架下CSS和JS的路径问题

注意:CI框架下的CSS和JS的引用必须放在框架外面,比如,可建立resource文件夹与application同级,用来封装CSS和JS. 在view层用resource里面CSS和JS可采用以下几种方式: 1. 直接采用绝对路径: <link rel="stylesheet" href="/CI_message/resource/bootstrap/css/bootstrap-responsive.min.css"> 2. 采用相对路径: 2.1 在…

webpack生成的css文件background-image url图片无法加载

之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到:目前用webpack4开发项目时,同样遇到类似的问题:所以就借此机会探讨一下产生问题的原因. 问题产生原因 webpack3项目场景复现 项目webpack有关css的配置伪码如下: output: { // 项目编译输出路径 path: path.resolve(__dirname, 'dist…

nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG

需求描述,由于工作的需要,需要将原本用于1280 720的网页改为1920 1080的网页(电视端页面).需求可以拆分为两部分,代码部分的修改以及图片的修改.在代码部分,需要将所有位置以及大小相关的值乘以1.5,图片的尺寸也要放大1.5倍.首先使用nodejs遍历当前的文件夹: // 遍历所有的文件 var fs = require("fs") var path = require("path") var relativePath = '\\test' // 拿到需…

Vue.js中的图片引用路径问题

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在template模板里面:/*错误写法*/ <img src="{{imgUrl}}"> 以上是错误写法,我们应该用v-bind绑定图片的src属性: <img :src="imgUrl">或者 <img src="../assets/logo…

IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求

今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html .css .js .jpeg等)请求,而这不是我预期的效果,因为我只想让托管文件(aspx, ascx 及 MVC等)的请求被自定义HttpModule处理,但是我发现在IIS7的集成模式下所有请求都会进入HttpModule被处理. 后来我尝试将IIS7站点下的应用程序池改为了经典模式,这样的话…

向下滚动页面加载图片的js

js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图片数组 [{ url: "/CMF01_000.jpg"},{ url: "/CMF01_001.jpg"}] img_max: 0, //图片数量 img_num: 0, //图片累计已加载的数量 step_max: 3, //每轮加载图片的数量 从0开始计数 ste…

CSS+JS下拉菜单和纯CSS下拉菜单

下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定位它. 有两个问题需要注意, 第一个问题,列表项设置了float浮动,因此列表也要浮动已防止列表收缩: ul.nav,ul.nav ul{float:left} ul.nav li{float:left} 第二个问题,子导航的定位 ul.nav li ul{position:absolute;lef…

SpringMvc架构下css、js、jpg加载失败问题

SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在springmvc框架下访问路径拼凑出现错误. 网上看了多种方法实现都没有效果,最终发现需要在springmvc配置文件中添加配置项: 配置的静态资源存放路径一般在webapp文件下,如果需要放在其他地方,xml配置文件中的配置项需要相应做出修改. 修改后在看页面 一切正常了.…