解决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常见注意事项
Jan 01 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue2.x中的Render函数详解
May 30 Javascript
详解Vue中一种简易路由传参办法
Sep 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
jQuery select控制插件
2009/08/17 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
vue router demo详解
2017/10/13 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python 经典数字滤波实例
2019/12/16 Python
如何在python中执行另一个py文件
2020/04/30 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
高中毕业自我鉴定范文
2013/10/02 职场文书
银行求职推荐信范文
2013/11/30 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
法律进学校实施方案
2014/03/15 职场文书
市政管理求职信范文
2014/05/07 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python