vue 图片加载及报错解决

最新推荐文章于 2024-08-16 10:29:15 发布

LuckyisLhh

最新推荐文章于 2024-08-16 10:29:15 发布

阅读量951

点赞数 4

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/luckyislhh/article/details/135850654

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端开发中处理图片路径，包括静态地在HTML中使用相对路径和动态导入图片，分别展示了ES6模块的import和CommonJS模块的require的用法。

摘要由CSDN通过智能技术生成

一、图片路径固定

直接在 img 标签中的 src 中填入相对连接

  <div class="choose-icon">
    <img src="@/assets/images/login_bg2.jpg" alt="" style="width: 100px; height: 100px" />
  </div>

二、图片路径动态导入

图片路劲使用参数导入时直接使用，直接使用会报错，应该使用动态导入的方式，借助 import 或 require

2.1 在 ES6 模块中，使用 import 导入

<template>
  <div class="choose-icon">
    <img :src="src" alt="" style="width: 100px; height: 100px" />
  </div>
</template>

<script lang="ts">
import imgSrc from "@/assets/images/login_bg2.jpg";

export default {
  setup() {
    const src = imgSrc;
    return {
      src,
    };
  },
};
</script>

2.2 在 CommonJS 模块中，使用 require 导入

<template>
  <div class="choose-icon">
    <img :src="src" alt="" style="width: 100px; height: 100px" />
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const src = require("@/assets/images/login_bg2.jpg")

    return {
      src,
    };
  },
};
</script>