vue动态引入静态资源

vue动态引入静态资源

静态资源位置( ../../assets/piecture/page404.jpg**)或者(** @/assets/piecture/page404.jpg**)**

错误引入方式

错误引入方式(一)

html 复制代码
<template>
  <div>
    <img :src="`../../assets/piecture/${page404_$}.jpg`" class="page-404" />
  </div>
</template>

<script>
export default {
  name: "NotFound",
  data() {
    return {
      page404_$: "page404"
    };
  }
};
</script>

错误引入方式(二)

html 复制代码
<template>
  <div>
    <img :src="page404Path" class="page-404" />
  </div>
</template>

<script>
export default {
  name: "NotFound",
  data() {
    return {
      page404Path: "../../assets/piecture/page404.jpg",
    };
  }
};
</script>

正确引入方式

正确引入方式(一)

javascript 复制代码
<template>
  <div>
    <img src="../../assets/piecture/page404.jpg" class="page-404" />
  </div>
</template>

<script>
export default {
};
</script>

正确引入方式(二)

html 复制代码
<template>
  <div>
    <img :src="page404Imply" class="page-404" />
  </div>
</template>

<script>
import page404Imply from "@/assets/piecture/page404.jpg";
export default {
  name: "NotFound",
  data() {
    return {
      page404Imply
    };
  }
};
</script>

正确引入方式(三)

html 复制代码
<template>
  <div>
    <img :src="page404" class="page-404" />
  </div>
</template>

<script>
export default {
  name: "NotFound",
  data() {
    return {
      page404: require("@/assets/piecture/page404.jpg"),
    };
  }
};
</script>

正确引入方式(四)

html 复制代码
<template>
  <div>
    <img :src="page404ImpAsync" class="page-404" />
  </div>
</template>

<script>
export default {
  name: "NotFound",
  data() {
    return {
      page404ImpAsync: "",
    };
  },
  created() {
    import("@/assets/piecture/page404.jpg").then((res) => {
      this.page404ImpAsync = res.default;
    });
  },
};
</script>
相关推荐
熊的猫37 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫8 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子10 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享10 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果11 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄11 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰12 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式