最近遇到一个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. Delphi使用iTools安卓模拟器

    Delphi使用iTools安卓模拟器 1.去官网下载或https://pc.qq.com/detail/11/detail_22131.html 2.安装后,需要通过设置功能,设置一下分辩率,变成手 ...

  2. Centos 执行top命令详细解读

    1.作用:top命令用来显示执行中的程序进程,使用权限是所有用户. 2.格式:top [-] [d delay] [q] [c] [S] [s] [i] [n] 3.主要参数: d:指定更新的间隔,以 ...

  3. Visual Stuido快捷键

    转自:http://www.cnblogs.com/TankXiao/p/3164995.html 整理了一些VS的快捷键 格式化整个文档:(Ctrl + K, Ctrl + D)智能感知:(Ctrl ...

  4. 一个可遇不可求的 bug 全局变量初始化顺序问题 哈哈

    这是今天下午帮同事查的一个客户端 C++ 的 bug,前人留下的谜之代码.. 具体情况是,客户端实现了有一个简单的内存池,每次申请内存的时候会把新申请到的内存信息存到一个 map 里,据说是为了检查内 ...

  5. Javascript高级编程学习笔记(4)—— JS中的数据类型(2)

    接着昨天的文章,今天这篇文章主要讲述JS中剩余的两种数据类型String,和Object String类型 对于该类型,书中给出的解释为:由0或多个16为Unicode字符组成的字符序列. 对于JS中 ...

  6. 第七节:详细讲解Java中的日期,java.util.date

    前言 大家好,给大家带来详细讲解Java中的日期,java.util.date的概述,希望你们喜欢 类Date Java.lang.Object->java.util.Date public c ...

  7. Java学习笔记34(集合框架八:综合案例:模拟斗地主的洗牌发牌)

    规则: 1.54张扑克牌,有花色 2.顺序打乱,一人一张依次发牌,一人17张,留三张作为底牌 3.看牌:按大小王2A....43的序排列打印 示例: package demo; import java ...

  8. java相关技术问答(二)

    String为什么是final的 首先是为了安全性,final表示不可变,不可被继承,不能修改其方法保证安全 在多线程环境下,final类型的String保证线程安全 String支持字符串常量池,相 ...

  9. ARM中几个典型的汇编指令解析

    启动嵌入式设备时,遇到了一些汇编,做个笔记,免得以后忘记了. 一句汇编语句如下所指示: __asm ( ".syntax unified\n" ".thumb\n&quo ...

  10. java main()线程是不是最后一个退出的(相比较main中创建的其他多个线程)

    JVM会在所有的非守护线程(用户线程)执行完毕后退出: main线程是用户线程: 仅有main线程一个用户线程执行完毕,不能决定JVM是否退出,也即是说main线程并不一定是最后一个退出的线程. pu ...