vue cli 关于使用绝对路径引用图片的问题

Aldous 发布于2019-08-21 17:55 / 1890人阅读

摘要：在页面中使用绝对路径可通过在中用引入样式里面似乎无法使用绝对路径，除非把图片资源都放到里面，然后就可以这样引用但，放到里面打包后只会把资源复制到发布目录而不会把小图片优化为。

在页面中使用绝对路径可通过在js中用 require() 引入

data (){
    return {
        src: require("IMAGES/banner.jpg")
    }
}

样式里面似乎无法使用绝对路径，除非把图片资源都放到static里面，然后就可以这样引用

background: url("/static/images/banner.jpg") no-repeat;

但，放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。
为了兼顾可以把图片资源优化，所以还是不适合把图片资源放到static，
但，在vue页面style标签里面写样式随着目录的深入有可能引用路径是：

background: url("../../../images/banner.jpg") no-repeat;

有个做法似乎可以省去一些麻烦：
把样式文件统一放到style文件夹里面，样式图片资源用相对路径，然后在style标签用src属性引入样式，这样就可以避免太多层的返回了~~~

── src
    ── images
        ── banner.jpg
    ── style
        ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

云服务器 GPU云服务器 js 使用绝对路径 java图片路径问题 vue-cli vue-cli3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90199.html

用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

endiat 2019-08-22 18:23 评论0 收藏0
用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

doodlewind 2019-07-25 14:21 评论0 收藏0
用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

luoyibu 2019-08-02 10:48 评论0 收藏0
用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

snowLu 2019-08-30 15:54 评论0 收藏0
Vue.js中引入图片路径的几种方式

摘要：记录总结一下的中引入图片路径的几种书写方式中静态资源的引入机制关于静态资源的官方文档静态资源可以通过两种方式进行处理在被导入或在中通过相对路径以开头被引用。如果是一个绝对路径，例如，它将会被保留不变。 vue --version 3.6.3记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理...

adam1q84 2019-08-23 18:09 评论0 收藏0