vue项目中网络图片无法显示

Posted 2023-03-26

参考技术A 开发vue时在img标签中使用src属性引用图片后图片无法正常显示,但复制链接后能显示图片

解决:在public中的html中，header内加上:

referrer，一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。

我的第一个项目:(解决问题)Vue中canvas无法绘制图片

好家伙,

 

现在,我想要把我的飞机大战塞到我的主页里去,想办法把文件导入

 

然后,直接死在第一步,图片渲染都成问题

 

先用vue写一个测试文件

来测试canvas的绘制

<template>
  <div>
    <div ref="stage"></div>
    <button @click="drawsth()">添加</button>
    <img src="../assets/logo.png" alt="">
  </div>
</template>

<script>
// import  PlaneBattle  from "../../../../PB for Vue/startgame"
// console.log(document.getElementById(\'stage\'))
// plane.create(document.getElementById(\'stage\'));
export default 

  methods: 
    drawsth() 
      // PlaneBattle.createNewGame(this.$refs.stage)

      // console.log(this.$refs.stage)
      // plane.create(this.$refs.stage)
      console.log("我被执行啦")
      let canvas = document.createElement(\'canvas\');
      this.$refs.stage.appendChild(canvas);
      canvas.width = 480;
      canvas.height = 650;
      canvas.ref = canvas;
      canvas.style = "border: 1px solid red;"
      // this.$ref.stage.style = 
      console.log(this.$refs.stage)
      console.log("...")
      console.log(this.$refs.stage.canvas)
      const context = canvas.getContext("2d");

      let img = new Image();
      img.src = "../assets/logo.png";

        context.drawImage(img, 0, 0 ,480 ,650)

    
  


</script>

<style>
#stage 
      width: 480px;
      height: 650px;
      margin: 0 auto;
    
</style>

 

 

 

随后,在大佬的帮助下,我找到了问题所在

 

 

问题一:

应使用require的方式设置图片的src

img.src = "../assets/logo.png";

改为:

img.src = require("../assets/logo.png")

 

 

问题二:

必须在图片加载完毕后再进行绘制

context.drawImage(img, 0, 0 ,480 ,650)

改为(在外面套一层onload)

img.onload = function () 
        console.log("img加载完毕")
        context.drawImage(img, 0, 0 ,480 ,650)
      

 

修改后的代码:

<template>
  <div>
    <div ref="stage"></div>
    <button @click="drawsth()">添加</button>
    <img src="../assets/logo.png" alt="">
  </div>
</template>

<script>
// import  PlaneBattle  from "../../../../PB for Vue/startgame"
// console.log(document.getElementById(\'stage\'))
// plane.create(document.getElementById(\'stage\'));
export default 

  methods: 
    drawsth() 
      // PlaneBattle.createNewGame(this.$refs.stage)

      // console.log(this.$refs.stage)
      // plane.create(this.$refs.stage)
      console.log("我被执行啦")
      let canvas = document.createElement(\'canvas\');
      this.$refs.stage.appendChild(canvas);
      canvas.width = 480;
      canvas.height = 650;
      canvas.ref = canvas;
      canvas.style = "border: 1px solid red;"
      // this.$ref.stage.style = 
      console.log(this.$refs.stage)
      console.log("...")
      console.log(this.$refs.stage.canvas)
      const context = canvas.getContext("2d");

      let img = new Image();
      // img.src = "../assets/logo.png";
      img.src = require("../assets/logo.png")

      img.onload = function () 
        console.log("img加载完毕")
        context.drawImage(img, 0, 0 ,480 ,650)
      

    
  


</script>

<style>
#stage 
      width: 480px;
      height: 650px;
      margin: 0 auto;
    
</style>

 

搞定:

 

 

搞定了