最近遇到一个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. [ 9.29 ]CF每日一题系列—— 765B字符串规律

    Description: 遇到了ogo可以变成***如果ogo后面有go统统忽略,输出结果 Solution: 哎如果我一开始对题意的解读如上的话,就不会被整的那么麻烦了 Code: #include ...

  2. NET Core微服务之路：SkyWalking+SkyApm-dotnet分布式链路追踪系统的分享

    对于普通系统或者服务来说,一般通过打日志来进行埋点,然后再通过elk或splunk进行定位及分析问题,更有甚者直接远程服务器,直接操作查看日志,那么,随着业务越来越复杂,企业应用也进入了分布式服务化的 ...

  3. Mybatis关系映射

    一.一对一关系映射 使用resultType+包装类实现 1.假设问题背景是要求在某一个购物平台的后台程序中添加一个这样的功能:查询某个订单的信息和下该订单的用户信息.首先我们可以知道,一般这样的平台 ...

  4. 开源播放器 ijkplayer (四) ：Ijkplayer切换网络时停止播放的问题处理

    问题起因: 在进行ijkplayer播放器的测试时,发现ijkplayer播放器在切换网络时出现直播画面停止的问题. 问题分析: 抓取日志发现:tv.danmaku.ijk.media.player. ...

  5. Spring事务管理（详解+实例）

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  6. 第二十二节：Java语言基础-详细讲解位运算符与流程控制语句

    位运算符(二进制位运算) 运算符 运算 例子 << 左移 3 << 2 = 12 --> 3 * 2 * 2 =12 >> 右移 3 >> 1 = ...

  7. 从Redis生成数据表主键标识

    对于MySql的全局ID(主键),我们一般采用自增整数列.程序生成GUID.单独的表作为ID生成器,这几种方案各有优劣,最终效率都不能说十分理想(尤其海量数据下),其实通过Redis的INCR可以很方 ...

  8. Unicode 字符串排序规则（一）：如何确定单个字符的顺序

    一.一个具体的例子引发的问题 当今是国际化的时代,多种语言可能同时显示在屏幕上.比如一个人可能喜欢听华语歌.英文歌.韩文歌和日语歌,又比如他的联系人中有中国人.英国人.日本人.韩国人以及有英文名字的中 ...

  9. Spring Boot开启的 2 种方式

    Spring Boot依赖 使用Spring Boot很简单,先添加基础依赖包,有以下两种方式 1. 继承spring-boot-starter-parent项目 <parent> < ...

  10. 比较List和ArrayList的性能及ArrayList和LinkedList优缺点

    List和ArrayList的性能比较 在使用ArrayList这样的非泛型集合的过程中,要进行装箱和拆箱操作,会有比较大的性能损失,而使用泛型集合就没有这样的问题.List是泛型,而ArrayLis ...