解决vuecli3中img src 的引入问题


Posted in Javascript onAugust 04, 2020

最近公司要做一个在线ps 的项目 但是后台没写完, 我在用本地图片上传预览的时候 发现图片不能显示, 解决的办法 是

//页面的结构
 <div class="workspace" >
   <img :src='img'>
 </div>
export default {
 data() {
 return {
  img:require('../../assets/fapiao.jpeg'),
  //这里只能使用require的方式去使用 如果img 是数组, 就用 
  //[require('../../assets/fapiao1.jpeg'),
  //require('../../assets/fapiao2.jpeg'),
  //require('../../assets/fapiao3.jpeg').....]
  fileList: []
 };
 },
}

之前我用了绝对路径和 相对路径 都没有办法实现, 后来查官方文档是因为没有存放静态的asset 文件了 ,静态现在存放在public 的里面. 但是我在public里面去创建一个img 的文件,去放置图片,依然不可以. 所以 三种办法里面 只有require 使用vuecli3 ,

如果大家有好的解决办法 可以一起分享

1、在模板中直接引入图片资源(这种一般是@ 或者./ 去引入)

2、将图片资源放在static文件夹下

3、图片资源在assets文件夹下,data中必须用require加载,否则会当成字符串来处理

(我自己目前就是放在assets 里面. 因为是本地上传的 在做假数据的时候准备做一个预览,或者说以后的默认图片就是它了)

第二种,只要给图片放在static文件夹下即可:原因如下

这里在使用vuecli脚手脚构建工具,目录下会生成一个static目录,表示的是静态目录,推荐大家将img 存放在这个目录下,那么在webpack编译以后,依旧是可以获取到这个目录下的路径,这样就解决了路径不符而导致图片加载不出来的问题!当然项目中用的一般都是绝对路径,少数图片的话,这种方式挺好

但是 重点: vuecli3 没有static 啊!!!

=======补充

<ul>
   <li v-for="(item,index) in src" :key="index" @click="jump">
   <img :src="item" alt>
   </li>
 </ul>
export default {
 data() {
 return {
  centerDialogVisible: false,
  form: {
  LoginName: "",
  PassWord: ""
  },
  rules: {
  LoginName: [
   { required: true, message: "请输入用户名", trigger: "blur" }
  ],
  PassWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
  },
  message: "",
  src: [
  require("../assets/imgs/001.jpg"),
  require("../assets/imgs/002.jpg"),
  require("../assets/imgs/003.jpg"),
  require("../assets/imgs/004.jpg"),
  require("../assets/imgs/005.jpg")
  ]
 };
 },

完美的动态绑定, Gong智障继续加油 哈哈哈哈~!!!

再这个页面上接着补充一个 如果router-link 去页面跳转的怎么加配置

<ul>
   <li v-for="(item,index) in src" :key="index" @click="jump(item.address)" :plain="true">
   <img :src="item.img" alt>
   </li>
  
 </ul>
export default {
 data() {
 return {
  centerDialogVisible: false,
  src: [
  { img: require("../assets/imgs/001.jpg"), address: "taxplayerinfo" },
  { img: require("../assets/imgs/002.jpg"), address: "taxsheet" },
  { img: require("../assets/imgs/003.jpg"), address: "search" },
  { img: require("../assets/imgs/004.jpg"), address: "home" }
  ]
 };
 },
 methods: {
 jump(address) {
  this.$router.push({ name: address });
 }
 }
};

补充知识:vue-cli3.0 图片放在public,vue打包部署非根目录时,图片引入错误

解决办法:

方法1. 修改nginx 配置,以部署目录espace为例

upstream a.xx.com{
 server 127.0.0.1:8081;
}

server {
 listen 80;
 server_name a.xx.com;
 location /{
  proxy_pass http://a.xx.com;
 }
 location ^~/images/ {
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://127.0.0.1:8001/images/;
 }
 location ^~/espace/ {
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://127.0.0.1:8001/;
 }
}

方法2. 修改文件目录,将文件放于src/assets/images

vue.config.js

let path = require('path')

function resolve(dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 chainWebpack: config => {
  config.resolve.alias.set('@', resolve('src'));
 }
}

图片引入

<img src="@/assets/images/icon_file.png">
.check_box a.active::after {
 background: url(~@/assets/images/check_box.png) no-repeat center;
}

以上这篇解决vuecli3中img src 的引入问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
原生js 秒表实现代码
Jul 24 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
简介JavaScript错误处理机制
Aug 04 #Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 #Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 #Javascript
如何在Vue.JS中使用图标组件
Aug 04 #Javascript
You might like
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python迭代器和生成器定义与用法示例
2018/02/10 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python hash每次调用结果不同的原因
2019/11/21 Python
python操作cfg配置文件方式
2019/12/22 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
美容师的职业规划书
2013/12/27 职场文书
租房协议书怎么写
2014/04/10 职场文书
大学学风建设方案
2014/05/04 职场文书
授权委托书
2015/01/28 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
vue递归实现树形组件
2022/07/15 Vue.js