解决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 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 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
使用php判断网页是否gzip压缩
2013/06/25 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python中import reload __import__的区别详解
2017/10/16 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
学python最电脑配置有要求么
2020/07/05 Python
python request 模块详细介绍
2020/11/10 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
说明书怎么写
2014/05/06 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
出纳工作检讨书
2014/10/18 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
三好学生事迹材料
2014/12/24 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
比赛口号霸气押韵
2015/12/24 职场文书