最近遇到一个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. PHP几种加密方式

    1.MD5() 2.Sha1() 3.urlencode()方法用于加密,urldecode()方法用于解密 4.base64_encode (  )  64位加密   base64_decode ( ...

  2. unigui日志

    unigui日志 uniGUI本身提供了日志功能,利用uniServerModule.ServerLogger来控制如何写日志: Enabled:是否写日志 Options:logIndyExcept ...

  3. 夜谈Java类的定义

    女孩:谈Java了,好耶? 男孩:夜谈一下,Java的类的定义~ 女孩:那谈Java的类的什么呢? 男孩:类的定义,对象的定义,类中的方法,构造方法,this关键字,方法的重载,Java中的类的访问权 ...

  4. java8 parallel并行处理实战

    需求 我需要做一个人员某几项数据的统计,由于数据量较大,不能一次性加载到内存进行统计.所以采用了遍历每个用户.当然也可以分配处理. 分析需求可得知,每个用户其实互不相关,数据的统计可以同步进行,因此考 ...

  5. Shell-4--环境变量

  6. Python爬虫——反爬

    反爬概述 网络爬虫,是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成. 但是当网络爬虫被滥用后,互联网上就出现太多同质的东西,原创得不到保护. 于是,很多网站开始反网络爬 ...

  7. 最全的maven的pom.xml文件详解

    pom.xml代码: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  8. textarea 带换行符保存数据与带换行符展示数据

    毕业设计进行ing~ 最近要想要实现一个站内邮箱,想要带换行地输出邮件主体内容. 这两天为了解决这个问题百度了好多东西,发现相关问题有很多记录,可能这确实是大多数初学者也碰到的问题.自己找了好多地方都 ...

  9. [java初探外篇]__关于StringBuilder类与String类的区别

    前言 我们前面学习到String类的相关知识,知道了它是一个字符串类,并且了解到其中的一些方法,但是当时并没有太过注意到String类的特点,今天就StringBuilder类的学习来比较一下两者的区 ...

  10. Feign快速入门

    一.Feign简介1.Feign是一个声明式的web服务客户端,使用Feign编写web服务客户端更加容易2.具有可插拔注解支持,包括Feign注解和JAX-RS注解,还支持可插拔的编码器与解码器3. ...