解决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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP 读取文件的正确方法
2009/04/29 PHP
php一个找二层目录的小东东
2012/08/02 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python中动态创建类实例的方法
2017/03/24 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python中几种自动微分库解析
2019/08/29 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
以下的初始化有什么区别
2013/12/16 面试题
Ruby如何进行文件操作
2014/07/17 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
党员承诺践诺书
2014/05/20 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js