vue项目sql图片动态路径引用问题
最近遇到一个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图片动态路径引用问题的更多相关文章
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- 百度ueditor vue项目应用 -- 图片上传源码修改
本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...
- vue本地静态图片的路径问题解决方案
不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl ...
- 移动端vue项目的图片上传插件
有一移动端项目,使用的vant-ui.可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能. 于是乎:在https://www.npmjs.com/查找发现找到 vue-upload ...
- vue项目接口域名动态获取
需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项. 实现: 1.config/index.js 文件 进行基础配置 impo ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- vue项目发布后带路径打开页面报404问题
环境: 后端,python+uwsgi启动 前端:vue 用nginx运行,指定静态目录 问题 :发布后带路径打开页面报404问题,带路径打开即不是打开的主页 解决方案: https://route ...
- [项目实践] python文件路径引用的规则,记一次使用sys.path[0]的问题,及如何区分 ../与 ./的使用场景
下面是一个获取配置的代码 def getValue(self,section,option): """ @file: string,the name of the con ...
- 配置/更改vue项目中的资源路径
打开 build/webpack.base.conf.js ,在module.exports .resolve.alias下自定义: alias: { 'vue$': 'vue/dist/vue.e ...
随机推荐
- Delphi使用iTools安卓模拟器
Delphi使用iTools安卓模拟器 1.去官网下载或https://pc.qq.com/detail/11/detail_22131.html 2.安装后,需要通过设置功能,设置一下分辩率,变成手 ...
- Centos 执行top命令详细解读
1.作用:top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式:top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数: d:指定更新的间隔,以 ...
- Visual Stuido快捷键
转自:http://www.cnblogs.com/TankXiao/p/3164995.html 整理了一些VS的快捷键 格式化整个文档:(Ctrl + K, Ctrl + D)智能感知:(Ctrl ...
- 一个可遇不可求的 bug 全局变量初始化顺序问题 哈哈
这是今天下午帮同事查的一个客户端 C++ 的 bug,前人留下的谜之代码.. 具体情况是,客户端实现了有一个简单的内存池,每次申请内存的时候会把新申请到的内存信息存到一个 map 里,据说是为了检查内 ...
- Javascript高级编程学习笔记(4)—— JS中的数据类型(2)
接着昨天的文章,今天这篇文章主要讲述JS中剩余的两种数据类型String,和Object String类型 对于该类型,书中给出的解释为:由0或多个16为Unicode字符组成的字符序列. 对于JS中 ...
- 第七节:详细讲解Java中的日期,java.util.date
前言 大家好,给大家带来详细讲解Java中的日期,java.util.date的概述,希望你们喜欢 类Date Java.lang.Object->java.util.Date public c ...
- Java学习笔记34(集合框架八:综合案例:模拟斗地主的洗牌发牌)
规则: 1.54张扑克牌,有花色 2.顺序打乱,一人一张依次发牌,一人17张,留三张作为底牌 3.看牌:按大小王2A....43的序排列打印 示例: package demo; import java ...
- java相关技术问答(二)
String为什么是final的 首先是为了安全性,final表示不可变,不可被继承,不能修改其方法保证安全 在多线程环境下,final类型的String保证线程安全 String支持字符串常量池,相 ...
- ARM中几个典型的汇编指令解析
启动嵌入式设备时,遇到了一些汇编,做个笔记,免得以后忘记了. 一句汇编语句如下所指示: __asm ( ".syntax unified\n" ".thumb\n&quo ...
- java main()线程是不是最后一个退出的(相比较main中创建的其他多个线程)
JVM会在所有的非守护线程(用户线程)执行完毕后退出: main线程是用户线程: 仅有main线程一个用户线程执行完毕,不能决定JVM是否退出,也即是说main线程并不一定是最后一个退出的线程. pu ...