问题杂记-Vue组件中使用地址引入图片
2018-03-21 23:32
921 查看
一般我们在html 和css文件中需要用到图片时直接使用相对路径即可。如<img src="@/img/img1.png"/> background="url(@/img/img1.png)"但在vue中style中这样使用会出错，找不到文件。
template模板中既可以使用相对路径，也可以使用别名@ style中可以使用相对路径 不能使用webpack中配置的路径别名
解决方法：
1.使用相对路径../../img/img1.png
2.在路径前加~,该方法在template中同样适用即 ~@/img/img1.png;不加的话会将其解析为./@/img/img1.png就没有@文件夹
template模板中既可以使用相对路径，也可以使用别名@ style中可以使用相对路径 不能使用webpack中配置的路径别名
解决方法：
1.使用相对路径../../img/img1.png
2.在路径前加~,该方法在template中同样适用即 ~@/img/img1.png;不加的话会将其解析为./@/img/img1.png就没有@文件夹
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- android问题：从list集合中循环读取图片地址，使用异步下载，利用baseAdapter怎样显示到listView中
- vue引入图片问题
- Vue.js父与子组件之间传参 父向子组件传参 例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
- 关于vue组件中定时器中只能使用箭头函数的问题
- 使用vue-lazyload解决Vue+Webpack项目的图片加载问题
- Qt5.7中 QtQuick使用风格组件 安卓图片马赛克问题解决
- webpack+vue中使用别名路径引用静态图片地址
- 解决vue中无法动态修改jqgrid组件 url地址的问题
- vue引入百度地图api组件封装（根据地址定位）
- 问题杂记-Vue父子组件传值(ElementUI-Dialog)
- vue一个组件引入多个swiper轮播可能引发的分页器数量异常问题
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- 使用Flex中Image组件图片无法呈现问题分析
- css中background属性引入图片url()中地址问题
- vuejs组件使用问题
- Vue全局组件开发，Vue.use(xxx)一次引入，全局使用 【Vue 非父子组件通信】
- webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题