Img从十六色的src？

Question

我需要在网页上的某些图片代码中添加一些替代文字和/或标题。

html结构实际上并不在我的控制之下，因此即使标记本身被设置为显示从存储在SQL表中的十六进制代码派生的平面颜色，也需要图像标记。

赞这个

@hexCode

@colourName是有问题的颜色代码（即＆＃39;＃1f1f1f＆＃39;），background-color是客户选择的颜色的描述性名称。

我遇到的问题是，因为颜色是由 tableAB <- reactive({tableA}) mydata <- data.frame(tableAB) 属性设置的，所以标题文本（以及alt文本也会这样做）显示在颜色的顶部以及徘徊。

谷歌没有给我任何有用的解决方案，我只是不能将标题添加到图像中？我该怎么办？

Answer 1

为什么不使用div代替。出现title或alt的原因是，如果找不到图片，则应显示它们，并且您没有给出src。

＆＃13;

＆＃13;

<div style="background-color: gold; height: 30px; width: 30px;" title="Gold"></div>

＆＃13;

＆＃13;

＆＃13;

但是，如果您必须使用没有来源的img代码，则可以使用src="//:0"伪造有效来源。

＆＃13;

＆＃13;

<img src="//:0" style="background-color: gold; height: 30px; width: 30px;" title="Gold" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

我遇到的问题是因为the colour is being set by the background-color property标题文字（以及替代文字也是如此）   正在显示在颜色的顶部以及悬停。

否 - 正在显示标题和替代文字，因为未加载图像，正是为什么使用它们。 https://jsfiddle.net/b0njy0gg/

当图像来源出现时https://jsfiddle.net/thajo9pL/

Answer 3

我认为，由于您定义的img标签没有src属性，因此SEO不是您的目标之一 - 如果是这样，则以下解决方案将图像的font-size设置为0也会影响alt文本渲染的渲染，如下例所示：

＆＃13;

＆＃13;

img {
  border: 1px solid #aaa;
  display: block;
  font-size: 0;
  width: 200px;
  height: 50px;
}

＆＃13;

<img alt="Test" />

＆＃13;

＆＃13;

＆＃13;

对于任何关心w3c有效性或SEO友好性的人：不要在家里尝试这个！