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. OpenStack Manila发展动态系列--Austin峰会

    1 Manila Mitaka版本概述 在Austin峰会上介绍到,Manila Mitaka发布版本Driver个数达到了18个, M版本新加入14家公司(中国公司继华为之后又有99cloud等公司 ...

  2. JavaScript:undefined!=false之解 及==比较的规则

    JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...

  3. Windows下Apache+PHP+MySQL搭建web服务器

    Apache+PHP+MySQL搭建服务器 工欲善其事必先利其器. 最近由于电脑出了问题不得不重新安装需要的文件,代码什么的都没了,以前也没怎么写过东西这回就先试试手,写的不是太好,希望大家不要介意哈 ...

  4. [System Design] Design a distributed key value caching system, like Memcached or Redis

    https://www.interviewbit.com/problems/design-cache/ Features: This is the first part of any system d ...

  5. codevs 3031:最富有的人

    题目描述 Description 在你的面前有n堆金子,你只能取走其中的两堆,且总价值为这两堆金子的xor值,你想成为最富有的人,你就要有所选择. 输入描述 Input Description 第一行 ...

  6. #【Python】【基础知识】【模块】【Python的常用模块】

    在IDE解释器中,执行help('modules')可查看当前环境可调用的Python模块: >>> help('modules') Please wait a moment whi ...

  7. 使用jbc查询数据封装成对象的工具类

    适用于获取Connection对象的util package com.briup.myDataSource; import java.io.FileReader; import java.io.Inp ...

  8. 【AtCoder】AGC005

    AGC005 A - STring 用一个栈,如果遇到S就弹入,如果遇到T栈里有S就弹出栈顶,否则T在最后的串里,最后计算出的T和栈里剩的S就是答案 #include <bits/stdc++. ...

  9. Python---通配符的使用

    苹果单价 9.00 元/斤,购买了 5.00 斤,需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台 如果希望输出文字信息的同时,一起输出 数据,就需要使用到  ...

  10. 编写函数模拟strcpy()函数功能

    strcpy(字符数组1,字符串2) strcpy( )用于将字符串2复制到字符数组1中 /* strcpy(字符数组1,字符串2) strcpy( )用于将字符串2复制到字符数组1中 模拟strcp ...