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. linux CentOS安装telnet

    1.检查linux版本号 cat /etc/issue 2.检查是否已经安装telnet rpm -qa | grep telnet 上面的显示是已经安装.就不须要再安装了,假设没有,接着下一步吧. ...

  2. iOS开发之-- textview 光标起始位置偏移

    使用textview的时候,会发生光标偏移的情况,其实是因为iOS7里导航栏,状态栏等有个边缘延伸的效果在. 把边缘延伸关掉就好了.代码如下 //取消iOS7的边缘延伸效果(例如导航栏,状态栏等等) ...

  3. nat123动态域名解析软件使用教程

    nat123动态域名解析软件使用教程

  4. 《从零开始学Swift》学习笔记(Day 71)——Swift与C/C++混合编程之数据类型映射

    原创文章,欢迎转载.转载请注明:关东升的博客 如果引入必要的头文件,在Objective-C语言中可以使用C数据类型.而在Swift语言中是不能直接使用C数据类型,苹果公司为Swift语言提供与C语言 ...

  5. 用httpClient的PostMethot频繁发送数据,抛出Too many open files

    在工作过程中,用httpclient去压测一个web api,发现压一小段时间就出现了Too many open files.实际上,HttpClient建立Socket时 ,post.release ...

  6. LeetCode 笔记系列八 Longest Valid Parentheses [lich你又想多了]

    题目:Given a string containing just the characters '(' and ')', find the length of the longest valid ( ...

  7. 160608、mysql距离函数st_distance

    随着近几年各类移动终端的迅速普及,在手机移动定位app中,附近的人,附近的地点功能十分常见,基于地理位置的服务(LBS)和相关应用也越来越多,而支撑这些应用的最基础技术之一,就是基于地理位置信息的处理 ...

  8. 解决Atom的 gpp compiler,编译后在Windows的命令行终端运行,中文乱码

    按下快捷键Win+R,输入regedit打开注册变编辑器,依次找到 HKEY_LOCAL_MACHINE\Software\Microsoft\Command Processor\,右键新建一个字符串 ...

  9. win10系统安装Oracle11报错不满足最低要求

    以下问题是,在安装Oracle过程中遇到的问题以及自己的解决方法: 问题一:下载好两个Oracle的安装压缩包文件,同时解压后,启动setup.exe,报错:[INS-13001]环境不满足最低要求. ...

  10. 运用JS设置cookie、读取cookie、删除cookiev

    JS设置cookie: 假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为: document.cookie=&q ...