我个人喜欢把所有引用文件全部放在打包文件src的同级文件static文件内部,方便整合。

提醒:vue项目中正常情况下图片是由 url-loader 处理,加入了hash值,如果放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。

如果我们使用static目录存放图片会以为打包而产生一系列路径问题

总结来说有以下两种

使用绝对路径

===》 开发环境正常,但是到了生产环境因为就会全部找不到路径。

  • 原因:使用绝对路径打包好依然是绝对路径,但是生产环境没有设置根目录所有无法使用。

  • 解决方法:在服务器上设置SCP,即可使用绝对路径。

<template>
<div>
<h1>HTML直接使用</h1>
<img src="/static/images/b1.jpg" alt="">
<h1>JS使用</h1>
<img :src="imgUrl" alt="">
<h1>css中使用</h1>
<div class="bg"></div>
</div>
</template> <script>
export default {
data () {
return {
imgUrl: '/static/images/b2.jpg'
}
}
}
</script>
<style scoped>
.bg{
width: 750px;
height: 600px;
background:url('/static/images/b3.jpg');
}
</style>

使用相对路径

===》开发环境也正常,但是到了生产环境只有HTML里面的图片资源正常。JS和CSS中都找不到路径

原因:HTML里面的图片路径会经过vue转换路径所有正常显示,js因为没有处理而找不到路径。所以我们直接帮它处理即可

解决方法:

  • HTML中使用相对路径让vue正常打包转换路径;

  • JS中使用直接设置路径为打包后应该显示的路径 ./static/images/b2.jpg 即可正常显示

  • CSS中使用因为打包后代码都是在 css-- * .css文件中,所以我们使用 ../../static/images/b3.jpg。同时还需要修改两个地方的设置

【build/utils.js文件】

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //新增这一句,作用是设置打包过程中提取CSS的方法
})
} else {
return ['vue-style-loader'].concat(loaders)
}

【config/index.js 文件】

// 找到build
build: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
}
// 修改为
build: {
assetsSubDirectory: './static',// 子目录---解决css相对路径的问题
assetsPublicPath: './', //资源专用路径---解决JS路径问题
}

【使用演示】

<template>
<div>
<h1>HTML直接使用</h1>
<img src="../../static/images/b1.jpg" alt="">
<h1>JS使用</h1>
<img :src="imgUrl" alt="">
<h1>css中使用</h1>
<div class="bg"></div>
</div>
</template> <script>
export default {
data () {
return {
imgUrl: './static/images/b2.jpg'
}
}
}
</script>
<style scoped>
.bg{
width: 750px;
height: 600px;
background:url('../../static/images/b3.jpg');
}
</style>

以上就是我整理的使用static目录存放图片的解决方案,如果你有其他好的建议可以联系我哦!

vue项目使用static目录存放图片解决方案的更多相关文章

  1. Vue项目部署遇到的问题及解决方案

    写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello ...

  2. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  3. vue项目开发基本目录结构

    § 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...

  4. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  5. npm 创建vue项目(指定目录进行创建)

    1.先安装node,js和npm 检验mpm 和node的方式是 npm -v  / node -v 2.安装最新版本 npm install @vue/cli -g 意外安装老版本的是代码  npm ...

  6. 怎样理解 Vue 项目的目录结构?

      Vue 项目的目录结构如下, 我们将会在后面逐个去了解它们的作用: 01. build - 存储项目构建相关的代码, 比如 webpack. 02. config - Vue 的配置目录,包括端口 ...

  7. vue项目搭建及创建、目录结构、项目启动、全局配置

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  8. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  9. vue-cli搭建vue项目(单页面应用)

    1.全局安装vue-cli 2.创建项目: vue init webpack test test是项目名称,会在当前工作目录下新建一个test文件夹 接下来会手动选择一些配置 除了Setup unit ...

随机推荐

  1. bzoj 1791: [Ioi2008]Island 岛屿【基环树+单调队列优化dp】

    我太菜了居然调了一上午-- 这个题就是要求基环树森林的基环树直径和 大概步骤就是找环->dp找每个环点最远能到达距离作为点权->复制一倍环,单调队列dp 找环是可以拓扑的,但是利用性质有更 ...

  2. springboot(二)整合mybatis,多数据源和事务管理

     -- 1.整合mybatis -- 2.整合多数据源 -- 3. 整合事务 代码地址:https://github.com/showkawa/springBoot_2017/tree/master/ ...

  3. goalng——time包学习

    1.星期:type Weekday int const ( Sunday Weekday = iota Monday Tuesday Wednesday Thursday Friday Saturda ...

  4. win7任务计划提示”该任务映像已损坏或已篡改“怎么处理

    https://jingyan.baidu.com/article/e75057f2038e2febc91a8915.html 在命令行窗口(cmd)执行命令:schtasks /query /v   ...

  5. Scala-基础-数组(1)

    import junit.framework.TestCase import scala.collection.mutable.ArrayBuffer; //数组(1) //知识点-定义数组,变长数组 ...

  6. Android 仿 新闻阅读器 菜单弹出效果(附源码DEMO)

    这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...

  7. 第一次创建svn的项目的使用方法

    1.第一步.在服务器上创建svn项目,将开发人人员你的账号密码添加上去. 2.第二步.开始在本地创建一个文件夹,点文件夹,右键->tortoisSVN->repo-brower 填写svn ...

  8. 百度人脸识别AI实践.doc

    0, 前言 百度开放了很多AI能力,其中人脸识别就是其中之一. 本文对百度人脸识别AI进行实践检验,看看其使用效果如何. 鉴于是最为基础的实践,基本都是在其接口范例代码修改而来. 百度人脸识别AI网站 ...

  9. System.err与System.out的区别

    大多数操作系统都有三个标准文件描述符:标准输入,标准输出,标准出错. 三个操作系统的文件描述符映射到编程语言的标准库中,往往加了一层包装,但是名字通常还是叫标准输入,标准输出,标准出错. 在其它语言中 ...

  10. 【sqli-labs】 less61 GET -Challenge -Double Query -5 queries allowed -Variation4 (GET型 挑战 双查询 只允许5次查询 变化4)

    http://192.168.136.128/sqli-labs-master/Less-61/?id=1' 单引号双括号闭合 192.168.136.128/sqli-labs-master/Les ...