img 标签

img src

img标签显示 base64格式的 图片

参考文档: https://blog.csdn.net/kukudehui/article/details/80409522

解决方法

<img src="data:image/jpeg;base64,这里加上你的base64编码" alt="">

总结

总结如下:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

但是这种方法不兼容IE6/7，使用时要注意！

File 图片使用img标签显示

参考文档: https://www.jianshu.com/p/a96179dd54ab

通过接口请求获取对应的blob文件流，注意要设置responseType: ‘blob’，获取到数据后使用window.URL.createObjectURL(blob)将blob文件流转换成url，赋值给img标签的src属性就可以显示正确的图片。

File 对象继承自 Blob，所以直接window.URL.createObjectURL(file)获取url，将url赋值给img标签的src。

img svg

改变颜色

参考文档: https://zongzi531.com/2020/12/16/img%E6%A0%87%E7%AD%BE%E4%BD%BF%E7%94%A8svg%E5%90%8E%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98%E9%A2%9C%E8%89%B2/

示例:

<img src="@/assets/icons/box-arrow-in-right.svg" alt="Logo" width="30" height="30" 
  style="filter: drop-shadow(1000px 0 0 red); transform: translate(-1000px);"
>

这种方案不需要再定义晦涩难懂的 svg 标签，而是通过显示阴影的方式来解决问题，完美的解决了上面的问题，但是这个方案有一个注意点，需要将本身显示的图片移动至看不见的地方，不然就会有 2 个噢。

改变颜色2

参考文档: https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6

Of all the wonderfully useful things the SVG image format allows us to do on the web, perhaps the most useful is exposing shapes to the web browser, so we can manipulate them powerfully with JavaScript and lighting-quick with CSS. Want to add a stroke on hover? Super easy. Or change the fill? That’s three lines of CSS.

svg图片:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="svg">
  <path fill="currentColor" 
    d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
</svg>

说明:

  • 在svg的定义中设置了class="svg"

css定义:

.svg {
	width: 100%;
	height: auto;
}
.svg:hover {
	cursor: pointer;
	stroke: dodgerblue;
}

But SVGs on the web are far from perfect. One problem — not a fatal one, but still an issue with any virtual DOM — is that embedding SVGs directly into your app can be a resource hog. No matter how much you compress, no matter how logical and streamlined your components, if you need to load up hundreds of very-complex SVGs, React will need to track all of their nodes, and updating them becomes a chore. Changing properties on thousands of these nodes in real-time becomes noticeably laggy, mostly due to React having to continually calculate and batch-update so much material. This is especially pronounced in Safari 9.x and 10.x.

One way around this is simply linking to each SVG with an <img> tag, instead of embedding the actual SVG in the DOM. This way, the virtual DOM only needs to track one node per image, instead of hundreds for each SVG:

<img src="/static/icons/baseline-apps.svg" class="svg" />

But in doing so we’ve crippled our ability to manipulate our SVGs. No longer can we add stroke, move shapes, remove nodes or change fill. In short, if you want :hover to change the fill color, you’re back in the stone age. On first blush the only solution would seem to be to load up a different color SVG! This is downright primitive. What are we? Cavemen??

The answer, and the reason I wrote this article, is that no, you don’t have to go back to the neolithic, because our forebears invented CSS filter.

Although mostly used for gaudy blurs and overworked contrast levels, we can use these filter rules to — in effect — manipulate the SVG’s fill. All it takes is a bit of patience to get the properties just right, but it’s entirely possible.

Let’s say you want to change the fill color on a transparent-background SVG from black to blue on hover.

img_tag_change_svg_color_1.webp

First, let’s target the image with a CSS rule and invert the color, from black to white, using invert():

.svg {
  filter: invert(.5);
}

img_tag_change_svg_color_2.webp

The amount you invert will be the lightness of the final color. For this shade of blue we’re inverting 50% (.5), giving us a medium-gray base to work with.

Now, the crux of the whole trick: If filter provided us with some kind of coloration()or hue() property, this would have been much simpler. But no, as of 2017 this doesn’t exist, so we have to hack it. Instead, we can use sepia() to turn our gray into a brown:

.svg {
  filter: invert(.5) sepia(1);
}

img_tag_change_svg_color_3.webp

So here we are, finally with some color we can manipulate. Using saturate() and hue-rotate(), we can fiddle with these values until we arrive at the desired color. These can be visually adjusted until you get the right shade, or inspected in software like Photoshop and precisely reverse-engineered. To get a nice bright blue, I used these values:

.svg {
  filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
}

img_tag_change_svg_color_4.webp

And that’s it! Check my CodePen example, and play around with it to see how you can manipulate the fill color. You now have a super-fast, CSS-only way to change the fill of an SVG, even in an <img> tag, supported by every major browser (except IE). Enjoy!

完整代码:

<img src="https://union.io/images/repo/20170811-00--f04d0b.svg" class="svg">

body {
	background: #f1f1f1;
}
.svg {
	width: 100%;
	height: auto;
}
.svg:hover {
	cursor: pointer;
	filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
}

测试svg:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
  <path fill="currentColor" 
    d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
</svg>

说明:

  • 在svg中不设置class="svg"。