1.对于静态引用的资源:
<img src = "static/modelname/imgname.png">
// 修改为下面的写法
<img src = "../../../static/modelname/imgname.png">
 
2.不准在内联内显试的引用图片
// 禁止出现下面写法
<div style = "background: src(...)"></div>
 
3.动态引用的图片
<img ref = 'test'></img>
this.$refs.test.src = require('../../static/httpdemo/111.png') <div ref = 'test'></div>
this.$refs.test.style.background = 'url(' + require('../../static/httpdemo/111.png') + ')' // webpack会将../../../static/httpdemo/下所有图片打包。
<img :src = "require('../../../static/httpdemo/' + id)" v-show="id"></img>
<div :style = "'background: src(' + require('../../../httpdemo' + id) + ')'"></div>
 
<template>
<div>
<zy-header :headerTitle="$route.meta.title" :rightShow="true"></zy-header>
<div class="container">
// 通过:src设置图片路径
// 如果在页面初始化时或者在操作过程中将imgName值赋为'',这时页面会显示找不到图片,最好加上v-show。
<img ref="test" class="test" :src="img" v-show="imgName"></img>
// 通过:style设置背景图路径
<div class="test" :style="backgroundimg"></div>
</div>
</div>
</template> <script>
import ZyHeader from '../../components/ZyHeader'
export default {
data () {
return {
imgName: '111.png', // 图片名初始化,后面通过修改imgName的值动态更换图片
bgImgName: '111.png' // 背景图初始化
}
},
components: {
ZyHeader
},
computed: {
// 图片
img () {
return this.imgName ? require('../../../static/httpdemo/' + this.imgName) : ''
},
// 背景图
backgroundimg () {
return this.imgName ? {
backgroundImage: 'url(' + require('../../../static/httpdemo/' + this.bgImgName) + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '25px auto'
} : {}
}
}
}
</script>
<style scoped>
.test{
width:100px;
height:100px;
}
</style>
 
 
 
 
 

webpack打包静态资源和动态资源的更多相关文章

  1. web中静态资源和动态资源的概念及区别

    1.静态资源和动态资源的概念 简单来说: 静态资源:一般客户端发送请求到web服务器,web服务器从内存在取到相应的文件,返回给客户端,客户端解析并渲染显示出来. 动态资源:一般客户端请求的动态资源, ...

  2. WPF中的资源(一) - 静态资源和动态资源

    原文:WPF中的资源(一) - 静态资源和动态资源 WPF中,每个界面元素都含有一个名为Resources的属性,其存储的是以"键-值"对形式存在的资源,而其子级元素在使用这些资源 ...

  3. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  4. WPF基础篇之静态资源和动态资源

    静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用,之后就不再访问这个资源了. 动态资源(DynamicResource)指的是在程序运行过程中然会去访问资源. 一.定义 ...

  5. wpf中静态资源和动态资源的区别

    静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用,之后就不再访问这个资源了. 动态资源(DynamicResource)指的是在程序运行过程中然会去访问资源.

  6. 0055 <mvc:default-servlet-handler />不能同时访问静态资源和动态资源的问题

    刚才在折腾的时候,发现applicationContext.xml中配置了<mvc:default-servlet-handler />后,能访问静态资源,却不能访问动态资源了:注释掉之后 ...

  7. Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...

  8. 静态资源(StaticResource)和动态资源(DynamicResource)

    静态资源(StaticResource)和动态资源(DynamicResource) 资源可以作为静态资源或动态资源进行引用.这是通过使用 StaticResource 标记扩展或 DynamicRe ...

  9. 静态资源(StaticResource)和动态资源(DynamicResource)

    一.文章概述 本演示介绍了WPF的静态资源和动态资源的基本使用,并对两者做了简单的比较. 二.定义并使用资源 <Window x:Class="Demo010.MainWindow&q ...

随机推荐

  1. jboss eap 6.4 部署 从weblogic迁移

    从weblogic10.3像jboss 6.4项目迁移,遇到的一些问题: 因为使用weblogic可以自定义公共的war包库,在使用jboss中,也采取项目依赖公共库的方式: 1.jboss中使用公共 ...

  2. leetcode 153: Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  3. Struts2_day02--课程安排_结果页面配置

    Struts2_day02 上节内容 今天内容 结果页面配置 全局结果页面 局部结果页面 Result标签的type属性 Action获取表单提交数据 使用ActionContext类获取 使用Ser ...

  4. 复习及总结--.Net线程篇(4)

    这里要说的就是多线程的锁的问题了 锁:作用在于实现线程间的同步问题,最典型的是售票问题 1,InterLocked 提供的都是静态方法,用来同步对多个共享变量的访问,包括以原子方式递增,递减,比较和替 ...

  5. Android测试:从零开始3—— Instrumented单元测试1

    Instrumented单元测试是指运行在物理机器或者模拟机上的测试,这样可以使用Android framework 的API和supporting API.这会在你需要使用设备信息,如app的Con ...

  6. win7显示方向旋转快捷键禁用及图形属性打开方法

    方法/步骤   1 首先在桌面右键→打开[图形属性],如果没有,请看步骤2.如果有,直接进入步骤3 步骤阅读 2 为了美化桌面右键,往往会把桌面右键中的图形选项隐藏掉,此时,我们可以通过[控制面板]打 ...

  7. java的Enumeration转list

    java的Enumeration转list Enumeration<String> attrs = getAttrNames();// while(attrs.hasMoreElement ...

  8. SSM框架---搭建

    SSM框架简介 SSM框架,是spring + spring MVC + MyBatis的缩写,这个是继SSH之后,目前比较主流的Java EE企业级框架,适用于搭建各种大型的企业级应用系统. Spr ...

  9. 160302、细聊分布式ID生成方法

    一.需求缘起 几乎所有的业务系统,都有生成一个记录标识的需求,例如: (1)消息标识:message-id (2)订单标识:order-id (3)帖子标识:tiezi-id 这个记录标识往往就是数据 ...

  10. Python: 使用pip升级所有包

    pip 当前内建命令并不支持升级所有已安装的Python模块. 列出当前安装的包:  pip list 列出可升级的包:  pip list --outdate 升级一个包:  pip install ...