zoukankan      html  css  js  c++  java
  • Vue 中img图片加载失败解决方案

    在Vue有时候你引用本地图片在本地环境可以正常显示,但是到了服务器上就出现资源请求失败以及无法显示的情况。

    这是因为当你在元素里面绑定:src时,Vue将绑定属性的路径作为字符串输出了。

    export default {
          data () {
             return {
                img: '../../XXX/XXX/xx.png'      
          }
        }
    }
    
    //////////
    <img :src="img"> // 这种方式会先找到路径解析完在渲染图片
    

    以上解决方法对于单个的渲染非常合适,但是如果后端是个憨批给你返回的list中img字段不是一个url而是你本地对应的图片名称,得需要用到require()方法亲求本地文件

    export default {
          data () {
             return {
                imgList:[
                      {
                            img: 'XX.png',
                            title: '测试'
                      },{
                            img: 'XX2.png',
                            title: '测试2'
                      }
                ]
          }
        }
    }
    
    ////////////////
    
    <div v-for="(item, index) in imgList" :key="index">
      <img :src="require(`../../xxx/xxx/${item.img}`)" alt="测试">
      <span>{{item.title}}</span>
    </div>
    

    以上方法基本可以解决大多数Vue中图片加载失败的问题。但是最好的方式还是前后端在开发前沟通好。还有就是服务器配置方面的问题,在Vue的项目中,如果亲求图片资源的url域名少一段则需要自己在webpack中根据开发环境生产环境自己进行配置。

  • 相关阅读:
    Django之路由系统(urls.py)
    Django之配置文件(settings.py)
    初始Django
    CSS基础
    HTML
    mysql基础知识拾遗
    python的进程
    python 队列
    python的线程
    2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
  • 原文地址:https://www.cnblogs.com/wangjiahui/p/13219505.html
Copyright © 2011-2022 走看看