1.vue打包dist文件时，图片找不到，无法像在本地一样查看

问题描述：

　　本地代码：<div class="icon"><img :src="'../../src/assets/img/usecar/' + item.appIcon +'.png'" width="50" height="50"/></div>   （显示正常）

 

　　测试服务器：打包dist文件到测试服务器后，显示不正常

经分析为打包后路径问题，找不到图片路径

改成

<div class="icon"><img :src="'../../static/app/img/usecar/' + item.appIcon +'.png'" width="50" height="50"/></div>
 把静态图片文件放到static里面，同时确保webpack.config.index.js中的文件路径没有配置问题（如果是cli搭建项目，默认已经配置）。
补充说明：
另外还要注意的是后台是否对图片路径做了重定向（以上都做到了，如果有问题，可能是后台配置问题，本项目是pc端和移动端使用同一个域名，查找无法区分移动端和pc端是哪一个打包后的static文件，故移动端需加app文件夹予以区分；另外一种就是移动端打包dist的static，文件名改成appstatic,本地静态文件夹同时修改，确保本地和服务器上运行一致。）
 
 

vue打包dist文件时，图片找不到的更多相关文章

  1. 关于在打包Jar文件时遇到的资源路径问题(一)

    当我们将程序写好,并进行打包成Jar文件时,通常都带有各种资源,这些资源可以是图像或者声音文件,也可以是别的如文本文件或二进制文件等,这些资源都和代码密切相关.例如在一个JPanel类上显示一些可能变 ...

  2. 打包.a 文件时， build phases- Link Binary With Libraries

    打包.a 文件时, 如果是两个Targets那么可运行调试的  build phases-  Link Binary With Libraries  如果加入.a 文件. 那么就不需要在Compile ...

  3. 关于在打包Jar文件时遇到的资源路径问题(二)

    在关于<关于在打包Jar文件时遇到的资源路径问题(一)>中,以及描述了当资源与可执行JAr分离时的资源路径代码的编写问题,后来想了想,为什么将<Java核心技术卷一>中的程序1 ...

  4. vue 查看dist文件里的结构

    场景:优化打包后的代码,提高性能. 1.方式一:report-json. 1.1 package.json文件里加入以下命令, "report": "vue-cli-se ...

  5. Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

    1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...

  6. vue打包后css背景图片地址找不到

    背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加   publicPath: '../../'    就行 对比了下,com ...

  7. 关于cordova+vue打包apk文件无法访问数据接口

    作为一个cordova小白,我按照官方文档和网上资料完成了讲vue文件打包到cordova中并打包成apk文件,完成了一个简单app的制作,当我正陶醉于可以自己完成一个app的时候突然发现,我的app ...

  8. 如何修改Vue打包后文件的接口地址配置

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

  9. cmd下运行java文件时，找不到或无法加载主类的解决方法

    最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示:

随机推荐

  1. Python基础-day04

    函数基础 目标 函数的快速体验 函数的基本使用 函数的参数 函数的返回值 函数的嵌套调用 在模块中定义函数 01. 函数的快速体验 1.1 快速体验 所谓函数,就是把 具有独立功能的代码块 组织为一个 ...

  2. iOS——偏好设置的创建，数据写入与读取

    NSUserDefaults与NSDictinary? 应用通过NSUserDefaults用键值对的方式来读取和保存偏好设置数据,与通过键从NSDictionary对象中获取数据一样,不同之处在于N ...

  3. swift 第四课 随意 设置button 图片和文字 位置

    项目中经常遇到按钮改变文字和图片位置的情况,所以尝试写一个 button 的分类: 参照连接 http://blog.csdn.net/dfqin/article/details/37813591 i ...

  4. WordPress自定义菜单和修改去除多余的css

    这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了. 所以我们在模板制作过程中,需要自定义WordPress菜单. 在functions.php文件中 ...

  5. MySQL之LEFT JOIN中使用ON和WHRERE对表数据

    背景 left join在我们使用mysql查询的过程中可谓非常常见,比如博客里一篇文章有多少条评论.商城里一个货物有多少评论.一条评论有多少个赞等等.但是由于对join.on.where等关键字的不 ...

  6. 记录下关于RabbitMQ常用知识点（持续更新）

    1.端口及说明: 4369 -- erlang发现口 5672 --client端通信口 15672 -- 管理界面ui端口 25672 -- server间内部通信口 举例说明 我们访问Rabbit ...

  7. Linear regression with one variable - Model representation

    摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第二章<单变量线性回归>中第6课时<模型概述>的视频原文字幕.为本人在视频学习过程中逐字逐句记录下 ...

  8. outlook寻找/删除指定日期范围内的邮件

    总是收到很多系统预警邮件,时间久了攒了好多垃圾邮件.实际上只需保存近期预警邮件,之前的完全可以删除. 上网找了一圈也没找到方法,然后自己想到了一种,步骤如下: 使用outlook规则,将指定日期范围内 ...

  9. webpack4实例

    webpack现在已经成为前端很多的打包器.网上关于webpack的相关文章也是很多,本文主要是根据自己的学习步骤来记录的,进行简单的webpack实例的讲解. 注意:一定要确定安装的node.js的 ...

  10. 数字麦克风PDM转PCM与STM32 I2S接口应用----重要文档列表

    数字麦克风PDM脉冲到PCM信号需要一个二次采样,ST 提过了PDM2PCM的软件包,可以完成上面的工作.软件包源码没有开源,使用手册也简洁的让人抓狂,我觉得可能是因为ST更高级的MCU直接带了硬解码 ...