vue3引入本地静态资源图片

吃葡萄不吐葡萄皮嘻嘻

已于 2024-07-01 15:58:19 修改

阅读量575

点赞数 1

文章标签： javascript vue.js

于 2024-07-01 15:56:57 首次发布

本文链接：https://blog.csdn.net/qq_45695853/article/details/140102402

版权

一、单张图片引入

import imgXX from '@/assets/images/xx.png'

在这里插入图片描述

二、多张图片引入

说明：import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用
在这里插入图片描述

在这里插入图片描述

注意：填写自己项目图片存放的路径

/** vite的特殊性, 需要处理图片 */
export const requireImg = (imgPath:String) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};

在这里插入图片描述

图片预览成功啦～
在这里插入图片描述

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吃葡萄不吐葡萄皮嘻嘻

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3引入本地静态资源图片

说明：import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用。
复制链接

扫一扫

Vue3的图片引入

LILEILEILOVE的博客

03-12

1万+

方法引入 <img :src="imgFun('test.png')"/> function imgFun(val){ return new URL(`../../asseets/home/img/${val}`,import.meta.url).href; } 背景样式引入 .box{ background:url("../../assets/home/img/test.png") } .box1{ background:url("~@assets/home/img/test.png") }

vue引用本地静态资源（图片、音频、视频）

只如初见0706的博客

03-02

6284

说明：本文章用于说明引用项目下本地资源（图片、音频、视频）的引用方式，从后台服务器获取的资源并不完全适用 1、第一种引用方式：直接在<template>中引用，src中使用相对地址 <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> &lt...

参与评论您还未登录，请先登录后发表或查看评论

vue3+vite：动态引入静态图片资源

qq_45796592的博客

06-13

2602

vite不支持require方法；vue3+vite如何动态引入静态图片资源

Vue 3 中引入图片的方法

热门推荐

LoveSummer

07-21

7万+

vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。......

vue3 如何引入静态资源图片

weixin_45102212的博客

06-01

5134

vue3如何引入静态资源

vue3 vite版本引入本地静态图片的方式

xiexikk的博客

01-28

2万+

vue3引入本地静态图片

在Vue 3中加载本地图片和其他静态资源

码农键盘上的梦

02-23

8085

以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。首先，确保你已经安装了file-loader或url-loader插件。首先，确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具，也可以使用ES6的。例如，如果图片位于与组件相同的目录下，可以使用。函数将图片作为模块导入，然后在组件中使用它。目录下，然后使用绝对路径来引用它们。

Vue3动态引入图片

明月清風

04-04

1万+

技术方案 Vue3+Composition API 场景在子组件中需要将父组件传入的图片路径赋给img标签，对图片进行显示。为便于子组件复用，图片路径需动态传入，不可在子组件中写死。问题若在setup函数中直接return imgSrcUrl，并在template img标签中引入的话，会导致无法显示图片即找不到文件所在路径，与webpack打包静态资源的方式有关系。 <template> <div> <img :src="userImgSrc">

解决vue打包之后静态资源图片失效的问题

08-28

解决 Vue 打包之后静态资源图片失效的问题在 Vue 项目中，经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...

解决Vue动态加载本地图片问题

10-16

在Vue.js应用中，动态加载本地图片是一种常见的需求，特别是在处理数据量较大的列表或轮播图等场景。本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。首先，我们遇到的问题是当尝试...

vue-cli3访问public文件夹静态资源报错的解决方式

10-14

在使用Vue CLI 3开发Vue应用程序时，经常会利用public文件夹来存放静态资源文件，如图片、图标、HTML模板等。这些静态资源在开发环境下通常不会有任何问题，但一旦进行部署时，可能会遇到访问这些资源时返回404错误...

浅谈在vue-cli3项目中解决动态引入图片img404的问题

10-15

在Vue-cli3项目中，静态资源如果放在了固定的位置，无论是使用相对路径还是绝对路径，都不会出现404错误，因为Webpack在构建过程中会将这些静态资源复制到构建目录。然而，动态图片路径问题的出现，主要是因为...

vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式

我总是词不达意的博客

07-20

3万+

vue3+vite 动态引用静态资源，动态引入assets文件夹图片的几种方式

前端开发攻略---三种方法解决Vue3图片动态引入问题

nibabaoo的博客

05-24

3504

解决Vue3图片动态引入问题

vue3 + vite引入本地图片

pscool的博客

06-24

5745

/ 打印的是： /src/assets/imgs/cover.png。

vue3+ts 获取静态资源图片

10-16

在 Vue3 + TypeScript 中获取静态资源图片，可以使用 `require` 函数来实现。具体步骤如下： 1. 在 `src` 目录下创建一个 `assets` 文件夹，将图片放入其中。 2. 在组件中使用 `require` 函数引入图片，例如： ```typescript <template> <div> <img :src="imageSrc" alt="image"> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { imageSrc: require('@/assets/image.png') }; } }); </script> ``` 注意：在 TypeScript 中使用 `require` 函数时，需要在 `tsconfig.json` 中配置 `"esModuleInterop": true`。