vue项目中的图片操作【一】

要命！这么多年，技术还是有点菜！怎么搞的，前端不擅长也就算了，简单的图片操作咋也不会

img标签图片显示异常

大概就写了个img标签，src地址写了网络图片地址，访问就报错403。哎！这个网络图片地址直接复制出来，在浏览器的地址栏是可以正常浏览打开哈！【就是这么神奇】 其实也没有写啥，就简单用了个img标签，类似这样：

<template>
  <div>
    <img src="https://pic.netbian.com/uploads/allimg/221201/005454-1669827294d312.jpg" alt="">
  </div>
</template>

<script>
export default {
  name: "ImgUtil"
}
</script>

<style scoped>

</style>

然后运行访问就403了

不过也没啥大问题，也就简单的网络安全问题，【主要还是解决办法很简单】简单说一下解决办法。因为是vue项目，所以先找到项目index.html

添加这行meta就可以解决了

<meta name="referrer" content="no-referrer" />

还是很简单吧！那就顺便科普一下meta

meta——HTML语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。meta元素可提供相关页面的元信息（meta-information）

官方这样讲还是有点难以理解，主要还是要了解meta标签的两个属性。分别是http-equiv属性和name属性。不同的属性有不同的参数值，这些不同的参数值就实现了不同的网页功能。比如针对搜索引擎和更新频度的描述和关键词。具体怎么用呢？举个例子：

<!-- 设置文档字符编码 -->
<meta charset="utf-8">

是不是很眼熟？就是HTML语言常出现的标签，所以用起来还是不难的，看看下面这些使用方法

<!-- 告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- 指定页面初始缩放比例。-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- 注意点：上面3个meta标签必须放head标签最前面-->

<!-- 允许控制加载资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 尽可能早的放在文档 -->
<!-- 只适用于下面这个标签的内容 -->

<!-- 使用web应用程序的名称(当网站作为一个应用程序的时候)-->
<meta name="application-name" content="Application Name">

<!-- 页面的简短描述(限150个字符)-->
<!-- 在某些情况下这个描述作为搜索结果中所示的代码片段的一部分。-->
<meta name="description" content="A description of the page">

<!-- 控制搜索引擎爬行和索引的行为 -->
<!-- 所有搜索引擎 -->
<meta name="robots" content="index,follow,noodp">
<!-- 谷歌 -->
<meta name="googlebot" content="index,follow">

<!-- 告诉谷歌搜索框不显示链接 -->
<meta name="google" content="nositelinkssearchbox">

<!-- 告诉谷歌不要翻译这个页面 -->
<meta name="google" content="notranslate">

<!-- Google网站管理员工具的特定元标记，核实对谷歌搜索控制台所有权 -->
<meta name="google-site-verification" content="verification_token">

<!-- 说明用什么软件构建生成的网站 -->
<meta name="generator" content="program">

<!-- 简短描述你的网站的主题 -->
<meta name="subject" content="your website's subject">

<!-- 10个词以内的描述 -->
<meta name="abstract" content="">

<!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/">

<meta name="directory" content="submission">

<!-- 当前页面在整个网站中的权重 -->
<!-- General是一般页面，Mature是比较成熟的页面，Restricted代表受限制的。 -->
<meta name="rating" content="General">

<!-- 隐藏发送请求时请求头表示来源的referrer字段。 -->
<meta name="referrer" content="no-referrer">

<!-- 禁用自动检测和格式的电话号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 通过设置“off”,完全退出DNS队列 -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- 在客户端存储 cookie，web 浏览器的客户端识别-->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- 指定要显示在一个特定框架中的页面 -->
<meta http-equiv="Window-Target" content="_value">

<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">

<!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">

<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">

恭喜你！了解完啦，以后有啥问题也可以尝试用meta标签解决