最近遇到一个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. vue keep-alive解决关闭标签动态缓存问题

    直接上代码: <keep-alive :include='topNavMentNames'> <router-view ></router-view> </k ...

  2. git checkout tags with the same name as a branch

    显式指定某个 tag git checkout refs/tags/ git checkout refs/tags/v0.1 显式指定某个 branch git checkout refs/heads ...

  3. hadoop安装hbase

    1.安装hadoop hadoop安装请参考我的centoos 安装hadoop集群 在安装hadoop的基础上新增了两台slave机器,新增后的配置为 H30(192.168.3.238) mast ...

  4. JScrollPane的使用

    概述 jScrollPane.js是一个轻量级的滑块插件, 非常方便使用. 在前端工业界(写页面)使用非常广泛, 下面我记录下用法, 供以后开发时参考, 相信对其他人也有用. PS: 想起之前我用im ...

  5. input可以自动换行吗？？？

    某天,在项目开发的时候,后台java问我input可以换行吗,当时我也是有点懵逼,思考了几秒钟说应该可以,然后就开始尝试各种方法.然后,然后就打脸了.... 最后发现,原来input没有自动换行功能, ...

  6. HoloLens开发手记－配置开发环境 Install the tools

    随着Build 2016开发者大会的结束,HoloLens开发包也正式开放下载.Hololens没有独立的SDK,开发特性被集成到最新的Visual Studio Update 2中.如果你没有Hol ...

  7. python tricks

    1. cities = ['Marseille', 'Amsterdam', 'New York', 'Londom'] # the good way for i, city in enumerate ...

  8. odoo开发笔记 -- 日常开发注意点总结（持续补充）

    (1) odoo视图字段,如果是readonly,默认该数据是不会往后台传递的,因此,保存数据的时候,该字段的数据是不会存到数据库中的.(待确认,字段中增加默认值,保存) (2)视图界面,注释的时候, ...

  9. simhash文章排重

    原文链接:https://www.cnblogs.com/baochuan/p/9089244.html  背景     提升产品体验,节省用户感知度.——想想,如果看到一堆相似性很高的新闻,对于用户 ...

  10. Linux编程 8 (挂载mount,查看磁盘df du,搜索grep,压缩zgip,归档tar)

    一. 挂载存储媒体 linux文件系统将所有的磁盘都并入一个虚拟目录下,当使用新的存储媒体之前,需要把它放到虚拟目录下,这项工作称为挂载(mounting) 1.1 mount 命令 在linux上用 ...