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 ...
随机推荐
- 团队博客-第六周:Alpha阶段项目复审(只会嘤嘤嘤队)
小组名 题目 优点 缺点 排名 小谷围驻广东某工业719电竞大队 广工生活社区 功能多样,设计完整,实用,界面美观 界面风格不够统一,当前时间系统尚未发布 1 大猪蹄子队 四六级背单词游戏 界面十分美 ...
- NET Core微服务之路:SkyWalking+SkyApm-dotnet分布式链路追踪系统的分享
对于普通系统或者服务来说,一般通过打日志来进行埋点,然后再通过elk或splunk进行定位及分析问题,更有甚者直接远程服务器,直接操作查看日志,那么,随着业务越来越复杂,企业应用也进入了分布式服务化的 ...
- ETL概念详解
ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...
- Akka-Cluster(3)- ClusterClient, 集群客户端
上篇我们介绍了distributed pub/sub消息传递机制.这是在同一个集群内的消息共享机制:发布者(publisher)和订阅者(subscriber)都在同一个集群的节点上,所有节点上的Di ...
- Android 使用View绘制文字(DrawText)技术总结
转载请注明出处: http://www.cnblogs.com/renhui/p/7453534.html 这里的绘制文字不是直接调用TextView.setText(String content)去 ...
- 第十八节:详解Java抽象类和接口的区别
前言 对于面向对象编程来说,抽象是它的特征之一. 在Java中,实现抽象的机制分两种,一为抽象类,二为接口. 抽象类为abstract class,接口为Interface. 今天来学习一下Java中 ...
- 机器学习技法笔记:14 Radial Basis Function Network
Roadmap RBF Network Hypothesis RBF Network Learning k-Means Algorithm k-Means and RBF Network in Act ...
- iOS开发笔记(Swift)-通用App安装引导页的实现
之前一直做的项目都是基于OC开发的,最近开始尝试使用Swift语言来重写整个项目. 本篇文章主要是讲述如何使用Swift来实现常见的通用App安装引导界面. 效果预览: 实现思路: 主要是采用了UIS ...
- 一站式SpringBoot for NoSQL Study Tutorial 开发教程学习手册
SpringBoot2.0 + NoSQL使用教程,项目名称:“SpringBoot2NoSQL” 项目地址: https://gitee.com/475660/SpringBoot2NoSQL 项目 ...
- jfixed使固定行列可编辑表格
功能: 固定行列 可以在表格直接编辑 使用ajax对数据操作 使用tab键在可编辑列切换简单介绍一下jfixed 表格插件, jfixed /jfixed.rar