解决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 setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
基于openlayers实现角度测量功能
Sep 28 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
学习python类方法与对象方法
2016/03/15 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
校园文化艺术节宣传标语
2014/10/09 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
Go语言编译原理之源码调试
2022/08/05 Golang