最近遇到一个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. Hibernate3.0配置

    我的系统Win10(64x),Eclipse jee 2018-09 ,Sql2018版本. 以下是Hibernate3.0配置包 链接:https://pan.baidu.com/s/10Kizby ...

  2. Spring 使用javaconfig配置aop

    1.在xml中需要配置自动代理 /** * */ package com.junge.demo.spring.dao; import org.springframework.context.annot ...

  3. 方向导数，梯度和梯度下降之BGD,SGD

    方向导数和梯度的直观理解,from知乎-马同学: https://www.zhihu.com/question/36301367 BGD,SGD: https://www.cnblogs.com/gu ...

  4. Android 上传文件到 FTP 服务器

    实现背景 近期接触到一个需求,就是将文件从Android系统上传到FTP服务器,虽然之前接触过FTP服务器,了解基本的使用流程,但是将此流程从使用习惯转化为代码实现还是有一定难度的.但是基本的流程还是 ...

  5. 锚接口(下)——html5的history api

    概述 虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法,但是很多老式的浏览器并不支持它,所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange ...

  6. Docker优势

    设计,开发 ---> 测试 ----> 部署,运行 代码+运行环境 ---> 镜像 image 环境一致,资源占用少 自动化平台 Docker image的制作很重要

  7. Appium移动自动化测试入门及简单实例（python）

    1.介绍 Appium是一个移动端的自动化框架,可用于测试原生应用.移动网页应用和混合型应用,且是跨平台的.可用于IOS和Android以及firefox的操作系统.原生的应用是指用android或i ...

  8. [转]SQL SERVER整理索引碎片测试

    SQL SERVER整理索引碎片测试 SQL SERVER整理索引的方法也就这么几种,而且老是自作聪明的加入智能判断很不爽,还是比DBMS_ADVISOR差远了: 1SQL SERVER 2000/2 ...

  9. Linux中vim文本编辑器的介绍和使用方法

    vim主要模式介绍,vim命令模式. 确保系统已经安装了VIM工具 [root@panda ~]# rpm -qf `which vim` [root@panda ~]# rpm -qf `which ...

  10. spring boot 集成jsp

    刚开始操作的时候,遇到了个问题,在这记录一下.(因为自己是个新手,对maven项目结构不了解) 1.大概创建步骤如下 File-New-Project-Spring Initializr ,type选 ...