1、template 中引用图片，第一个为固定路径，第二个为动态绑定路径

eg：

　　<img src="XXXXXX.png" alt="">
　　<img :src="url" alt="">

当前路径显示为：

第一个图片正常显示，第二个图片无法显示，

解决办法：

2、在return 的 url 下，添加 require()，使其变成 url: require('../../image/user.png') 即可

表示我们的图片要用require引进来，静态资源都要用require引入

vue-cli 动态绑定图片失败的更多相关文章

  1. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  2. vue动态绑定图片和背景图

    1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...

  3. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  4. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  5. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  6. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  7. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  8. Vue CLI 3.x 简单体验

    文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...

  9. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

随机推荐

  1. python 多进程、多线程

    1.多线程: 下面讲一个简单用法,这个模块比较简单,但是实际使用中会遇到很多坑 from multiprocessing import process def go(s): print "主 ...

  2. 常用内置方法之：__str__,__repr__

    class Test(object): def __init__(self): pass def __str__(self): return "test" test = Test( ...

  3. LeetCode题解之 3Sum

    1.题目描述 2.问题分析 使用hashtable 的方法做,解法不是最优的,思路简单直观. 3.代码 vector<vector<int>> threeSum(vector& ...

  4. Appium环境搭建python篇（mac系统）

    1.安装Appium 通过终端安装: 安装nodejs,下载地址:https://nodejs.org/download/,安装完成后打开终端输入node -v,检查是否安装成功 安装npm,打开终端 ...

  5. 单例模式实现 Volitile ， interlocked

    //单例模式: //1. 双检锁机制 Volatile.write() //2. 静态变量 //3. Interlocked.CompareExchange(ref single, temp, nul ...

  6. Amazon Redshift数据库

    Amazon Redshift介绍 Amazon Redshift是一种可轻松扩展的完全托管型PB级数据仓库,它通过使用列存储技术和并行化多个节点的查询来提供快速的查询性能,使您能够更高效的分析现有数 ...

  7. python第三十二课——栈

    栈:满足特点 --> 先进后出,类似于我们生活中的子弹夹 [注意] 对于栈结构而言:python中没有为其封装特定的函数,我们可以使用list(列表)来模拟栈的特点 使用list对象来模拟栈结构 ...

  8. ES6标准入门之数值的拓展解说

    ES6提供了二进制和八进制数值的新写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503                    // true 0o767 === ...

  9. thinkphp5整合 gatewaywork实现聊天

    1:将下载的gatewaywork下的\vendor  下的workman文件夹,整个复制到tp5下的vendor目录下 2:tp5\application\push   新键push文件夹,将下载的 ...

  10. k8s 隔离context+namespace

    kubernetes 最简单的隔离是 应用间使用 namespace进行,对应不同项目,namespace 不同,那么相互调用使用 dns.namespace,而使用 context + namesp ...