相关疑难解决方法(0)

我正在构建的应用程序要求我的用户在此图像甚至有可能加载之前设置4条信息.这个图像是应用程序的中心部分,因此破碎的图像链接使整个事物看起来像是被塞住了.我想让另一张图片取代404.

有任何想法吗？我想避免为此编写自定义指令.

我很惊讶我找不到类似的问题,特别是当文档中的第一个问题是同一个问题时!

http://docs.angularjs.org/api/ng.directive:ngSrc

我有一个react组件,它是列表中的详细信息视图.

如果图像不存在并且存在404错误,我试图用默认图像替换图像.

我通常会在img标签中使用onerror方法,但这似乎不起作用.

我不知道如何做出反应.

这是我的组件:

import React from 'react';
import {Link} from 'react-router';
import ContactStore from '../stores/ContactStore'
import ContactActions from '../actions/ContactActions';

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = ContactStore.getState();
    this.onChange = this.onChange.bind(this); 
 }

componentDidMount() {
  ContactStore.listen(this.onChange);
  ContactActions.getContact(this.props.params.id);
}

componentWillUnmount() {
  ContactStore.unlisten(this.onChange);
}

componentDidUpdate(prevProps) {
  if (prevProps.params.id !== this.props.params.id) {
    ContactActions.getContact(this.props.params.id);
  }
}

onChange(state) {
  this.setState(state);
}

render() {
  return (
    <div className='container'>
      <div className='list-group'>
        <div className='list-group-item animated fadeIn'>
          <h4>{this.state.contact.displayname}</h4>
          <img src={this.state.imageUrl} />
        </div>
      </div>
    </div>
  );
} …

根据默认行为,alt属性在图像渲染之前第一次呈现.我在网格中显示25个图像,因为它alt首先显示所有属性,看起来有点尴尬.

是否可以alt在Firefox中隐藏属性？

注意: alt在我的情况下,属性包含动态名称.

我有一个<img>显示远程图像.我想让它回退到另一个本地图像,在远程的图像无法访问的情况下.

<img class="cc_image fallback" src="http://www.iconarchive.com/download/i82888/limav/flat-gradient-social/Creative-Commons.ico"> 

.cc_image {
    width: 256px;
    height: 256px;
}

.cc_image.fallback {
    /* this URL here is theoretically a local one (always reachable) */
    background-image: url('https://cdn2.iconfinder.com/data/icons/picons-basic-3/57/basic3-010_creative_commons-256.png');
}

它的工作原理是,当找不到src图像时,将显示背景图像.

缺点是:

• 它将始终加载背景图像(额外的HTTP请求)
• 它在原始图像的位置显示了一个小的未找到图标(Safari上的问号),显示在背景图像上方(不是一个大问题,但我想摆脱它)

我怎么能解决这些问题？或者:是否有其他技术可以达到相同的效果？

我发现了这个问题,但是给定的解决方案依赖于Javascript或on <object>(这似乎不适用于Chrome).我想要一个纯CSS/HTML解决方案,如果可能的话没有Javascript.

我知道这个倍数,background-image但我不确定它是否是一个不错的选择(浏览器支持？它会与无法访问的图像一起回退吗？).或者我在考虑将SVG图像嵌入为数据uri.

建议最灵活(和兼容)的方法？

我使用 Semantic UI React创建了一个图像元素。

<Image floated="right" size="mini" src="/someImageUrl.png" />

如果图像的src属性未加载，则会显示损坏的图像占位符。

当我的图像未加载时，如何隐藏这个损坏的图像占位符而不显示图像？

我已经尝试按照这个 StackOverflow 答案中的答案进行操作，该答案建议使用

<Image src="Error.src" onerror="this.style.display='none'"/> 

但我收到错误 Expected 'onError' listener to be a function.

您知道如何隐藏经典的 \xe2\x80\x9cImage not found\xe2\x80\x9d 或损坏的图标，但当未找到图像文件时，alt 仍然存在于渲染的 HTML 页面中？\n像这样，\n <img id="testImg" src="#" alt="No Image"/>:\n

更改为：无图像（仅显示 alt）

有使用 JavaScript/jQuery/CSS 的工作方法吗？\n谢谢\'s

我的页面上有一些图像.

默认情况下,如果给定的图像不可用,则Chrome和IE上会显示损坏的图像指示符.

我想要什么都不显示,但在这种情况下是替代文字.有没有办法使用CSS处理它.

我有一个页面，其中包含许多标签的列表<img>。所以加载所有图像需要很长时间。在加载任何图像之前，我会看到损坏的图像图标。我想在加载图像时替换损坏的图像。我测试了这个答案，但它只是在发生错误时才起作用。有没有办法用 javascript 或 jquery 来做到这一点？

有解决方法吗？我正在运行自己的自定义滚动条脚本,而不是使用内置的浏览器功能.出于多种原因,我更喜欢将SVG用于我的图像元素,但其中一个主要的缺陷是,在svg上触摸或鼠标滚动会阻止事件,从而使页面滚动停止.这在svg可能占用文档的整个宽度的移动浏览器上更加明显,在这种情况下,一旦到达SVG元素,用户就无法滚动它.

我没有在IE中测试,但在Chrome中,触摸命令不能在SVG之上工作,而在Firefox上,鼠标滚轮事件是一个问题.我猜它会在IE上都哈哈.

一个不错的解决方案是以某种方式向我的SVG元素添加一个事件,捕获事件并将它们传递给滚动事件.我似乎无法找到办法.更好的解决方案是以某种方式将文档放在SVG之上,这样SVG根本不会干扰滚动.再一次,似乎找不到办法.

我使用对象标签嵌入了我的SVG元素,这很重要,原因有很多.我假设对象标签实际上是罪魁祸首.

我的网站上有很多大图片(这是一件T恤店).<alt>为了SEO目的,我为标签添加了关键词.问题是,当加载图像时,<alt>标签会显示给用户,看起来很丑,因为<alt>标签非常长.

有没有办法隐藏<alt>用户的标签,但是将它们保存在代码中以帮助搜索引擎排名？