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 ...
随机推荐
- 中国剩余定理poj1006
中国剩余定理即解一组带余除法的不定方程组(同余式组解法). 例如:求一个最小数x,已知x%3=2且x%5=3且x%7=2. 思路就是: 1.先从(3,5)的公倍数中找一个%7=1的最小公倍数,这里是1 ...
- 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件
[源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 作者: ...
- 我的FP感悟
FP概要: 我主要总结了以下5点: 函数是一等公民: 函数的参数是函数,返回值是函数,类型还是函数... 舍弃语句,拥抱表达式: 表达式就一定有返回值. 无副作用: 不修改外部系统的状态. immut ...
- docker,docker-compose部署服务器
搭建服务器 docker 是一种容器技术,作用是用来快速部署服务,docker-compose 是用来做docker 的多容器控制. 简单的来说:docker-compose即为一种自动化部署服务. ...
- 如何用java POI将word中的内容导入到mysql数据库中
由于作业需要,要求我们将word文档中的数据直接导入到mysql中,在网上找了很常时间,终于将其解决. 由于比较初级,所以处理的word文档是那种比较规范的那种,条例比较清晰,设计的思路也比较简单,就 ...
- Android应用系列:完美运行GIF格式的ImageView(附源码)
前言 我们都知道ImageView是不能完美加载Gif格式的图片,如果我们在ImageView中src指定的资源是gif格式的话,我们将会惊喜的发觉画面永远停留在第一帧,也就是不会有动画效果.当然,经 ...
- thinkphp的自动生成
第一,在index.php里定义 define('BIND_MODULE','Admin'); //自动生成Admin目录下的结构(默认生成IndexController) define('BUILD ...
- C# GDI+编程之Graphics类
GDI+是GDI的后继者,它是.NET Framework为操作图形提供的应用程序编程接口,主要用在窗体上绘制各种图形图像,可以用于绘制各种数据图像.数学仿真等. Graphics类是GDI+的核心, ...
- OpenCV两种畸变校正模型源代码分析以及CUDA实现
图像算法中会经常用到摄像机的畸变校正,有必要总结分析OpenCV中畸变校正方法,其中包括普通针孔相机模型和鱼眼相机模型fisheye两种畸变校正方法. 普通相机模型畸变校正函数针对OpenCV中的cv ...
- JWT 从入门到精通
什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点 ...