vue 组件中图片地址，图片获取

前提：在组件中使用引用图片，用于<img src> 或者背景图片background;

当我们利用vue-cli 搭建好项目的框架，开始高高兴兴开发组件的时候，有的时候想加一张图片，或者

在样式中加个背景，会发现，图片引用不进来，这可愁坏了不是；

组件中引用图片用于 <img src="???">

使用图片之前，我们可以这么做，在组件的script 中引入图片，下面示例引入一张图片：

import skate2 from "../assets/img/skate2.png"

export default {

name:"SkateTop"

}

</script>

导入我们的图片之后就可以在<img src="??">的地址中加上我们的地址就行了；

组件中样式中引入背景图片：

这个你可能会问，上面不是说了怎么引入图片了么，我用上面的方式也能加上背景图片啊，有什么问题么？

问题可大了，你现在是在本地开发，貌似没问题，当你开发完丢到服务器一看，背景图片咋没了，好奇怪啊，

好吧，问题在于：我们要修改一个东西：

看到没，找到这个utils.js 文件，图片都截给你了，找不到那就没办法了；

打开这个文件；

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

publicPath: '../../', //加上这么一句就可以了

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

看到了吧，加上这么一句话就OK了，这里说的是基于vue-cli搭建的目录，注意咯！

好了，关键点已经详述，自己尝试吧！

vue 组件中图片地址，图片获取相关推荐

vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕
在做项目的时候,想要实现背景图片将整个页面铺满,等内容变多,高度超过屏幕高度的时候,背景图片仍然能够完全铺满. 第一种方式:(不是想要的) 第一种情况就是最外层设置一个div盒子,宽度100%,高度1 ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
vue组件中校验身份证号，手机号和邮箱
vue组件中校验身份证号,手机号和邮箱直接上代码一.在js文件中添加校验方式和方法 1. 身份证号码校验(说明,这个身份证校验的方式很精确,算法仔细推荐使用) export function id ...
Vuex---在 Vue 组件中获得 Vuex 状态state
Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个 ...
vue v-else中使用document.getElementById获取不到值的问题
vue v-else中使用document.getElementById获取不到值的问题这个问题困扰了我两天,我经过反复排查,终于定位到了问题出现在v-if / v-else 判断属性中, 判断1: ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
在 vue 组件中查看 vuex 定义
原文:在 vue 组件中查看 vuex 定义在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性.但是在 vue 组件中引用这些 vue ...

vue 组件中图片地址，图片获取

vue 组件中图片地址，图片获取相关推荐

最新文章

热门文章