最近遇到一个vue动态图片路径的引用问题？明明路径是正确的但是却渲染不出图片！先看我慢慢说来！！

1、当我们把图片的路径放置在data（）{return：{}}中的数组中的时候，然后通过v-for循环数组。

　　当我们直接把图片路径给放在对象中的时候就像这样：{imgsrc:"../../assets/img/bbaa.jpg"},结果你发现图片在页面中渲染不出来。

　　但是当我们直接把图片放在<img src="../../assets/img/bbaa.jpg" />页面能够渲染，说明路径是正确的，那么就是vue项目中的问题了，我们把浏览器控制台打开发现图片路径从../../assets/img/bbaa.jpg变成了/static/img/......，

　　但是当我们去项目中的static文件夹看什么也没有。

为了解决这种问题我们需要在对象中这样写{imgsrc:require("@/assets/img/bbaa.jpg")}

2、上面第一种情况只能解决在页面中的假数据渲染，但是当我们从本地数据库拿到图片路径时，上面的方法就行不通了。

　　当我们使用Vue-cli创建项目的时候，你会看到一个static文件夹，为了解决熊数据库图片路径引用问题，我们把图片直接拷贝到static的根路径里面去，然后在数据库这样写图片的路径：

　　这时候启动项目，你就会发现页面的图片已经渲染出来了，当然还有其它 的方法，我的这种方法并不是最佳的选择，但是是最容易理解和方便的，在学习的过程中遇到这样的问题完全够用了。希望当你们遇到这样的问题，能够帮到你们！！

vue项目sql图片动态路径引用问题的更多相关文章

  1. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  2. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  3. vue本地静态图片的路径问题解决方案

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl ...

  4. 移动端vue项目的图片上传插件

    有一移动端项目,使用的vant-ui.可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能. 于是乎:在https://www.npmjs.com/查找发现找到 vue-upload ...

  5. vue项目接口域名动态获取

    需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项. 实现: 1.config/index.js 文件 进行基础配置 impo ...

  6. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

  7. vue项目发布后带路径打开页面报404问题

    环境: 后端,python+uwsgi启动 前端:vue  用nginx运行,指定静态目录 问题 :发布后带路径打开页面报404问题,带路径打开即不是打开的主页 解决方案: https://route ...

  8. [项目实践] python文件路径引用的规则，记一次使用sys.path[0]的问题，及如何区分 ../与 ./的使用场景

    下面是一个获取配置的代码 def getValue(self,section,option): """ @file: string,the name of the con ...

  9. 配置/更改vue项目中的资源路径

    打开 build/webpack.base.conf.js  ,在module.exports .resolve.alias下自定义: alias: { 'vue$': 'vue/dist/vue.e ...

随机推荐

  1. 17.异常(三)之 e.printStackTrace()介绍

    一.关于printStackTrace()方法 public void printStackTrace()方法将此throwable对象的堆栈追踪输出至标准错误输出流,作为System.err的值.输 ...

  2. MFC文件IO和串行化

    一. MFC中CFile对象实现了磁盘文档的读写,但是大部分MFC应用程序的IO服务都使用CArchive对象来完成.不管CFile和Archive输入输出的都是二进制数据,非文本数据. int a ...

  3. Transport Layer Protocols

    1 End-to-end Protocols(端到端协议) 传输层协议往往是主机对主机(host-to-host)或者说是端到端(end-to-end).通常希望传输层协议可以提供如下service: ...

  4. docker 安装Nginx

    1.使用镜像加速拉取nginx [root@192 ~]# $ docker pull registry.docker-cn.com/library/nginx:1.15 2.通过docker run ...

  5. Java面试集合（二）

    前言 大家好,给大家带来Java面试集合(二)的概述,希望你们喜欢 二 1.请问线程有哪些状态? 新建状态(New) 就绪状态(Runnable) 运行状态(Running) 阻塞状态(Blocked ...

  6. 《你不知道的javascript》读书笔记2

    概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...

  7. 仿B站项目(3)页面配置

    页面配置 B站有很多页面,比如说首页啊,动画页啊,音乐页啊,舞蹈页啊,那就从首页开始. 通过观察首页,可以看见有很多模块除了内容之外,在布局颜色等方面都是一样的,所以我可以开发一些模板或者插件,到时候 ...

  8. Taglist: Exuberant ctags (http://ctags.sf.net) not found in PATH. Plugin is not loaded

    1 开发环境 Ubuntu16.04(64bit) 2 错误描述 安装好Vim的TagList插件后,打开Vim提示: 3 解决方法 根据参考资料[1]的提示,可知那是因为当前系统没有安装ctags导 ...

  9. Testing - 软件测试知识汇总

    软件测试知识梳理 基础概念 : http://www.cnblogs.com/anliven/p/6070000.html 测试分类 : http://www.cnblogs.com/anliven/ ...

  10. 恭喜"微微软"喜当爹，Github嫁入豪门。

    今天是 Github 嫁入豪门的第 2 天,炒得沸沸扬扬的微软 Github 收购事件于昨天(06月04日)尘埃落定,微软最终以 75 亿美元正式收购 Github. 随后,Gitlab 趁势带了一波 ...