vue项目中通过require引入静态图片路径

最新推荐文章于 2024-04-22 13:53:24 发布

不吃土司边边

最新推荐文章于 2024-04-22 13:53:24 发布

阅读量1.8k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46125684/article/details/128128597

版权

方式一：在 img 标签中直接写上路径

<img src="../assets/img.png" alt="" />

方式二：使用变量定义定义静态图片路径

<img :src="imgSrc" alt="" />

data() {
    return {
      // Vue中js部分引入静态图片，必须使用require引入，否则无法正常显示
      imgSrc:require('../assets/icon.png')

      // 不可以使用以下写法
      // imgSrc:'../assets/icon.png' 
    }
  }

小Tip：如果在样式中，使用background引用图片不显示，可以试试require（'@/assets/icon.png')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不吃土司边边

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue项目中通过require引入静态图片路径

vue项目中通过require引入静态图片路径
复制链接

扫一扫

vue中require引入路径存在变量

qq_39131699的博客

06-26

6112

需求菜单icon是通过后台获取的，但图片本身存在前端，后台返回的数据是图片名称。问题直接使用require(‘路径名’+图片名+’.png’)报错：解决思路使用require.context找到图片相关信息，名称

vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)

动感超人的博客

08-21

1万+

vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。

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

vue中动态引入图片地址需要用require

热门推荐

weixin_45768768的博客

12-28

5万+

Vue 图片动态加载问题，require 导入使用变量问题，Vue打包前后文件夹目录比较

vue引入图片路径的三种主要方法

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

03-16

2万+

1、在js代码里面或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/

require引入资源时，资源路径为变量

longtengg1的博客

01-05

2957

1 场景： <img src="" alt="" /> 在vue项目中，使用img标签的src引入图片时，使用本地电脑图片的绝对路径（不能为相对路径），使用同源的网络图片，使用require(’./warning.png’)引入相对路径的图片 var icon='./warning.png' 那么如果让src中require一个变量，这个变量为图片路径的字符串，结果是报错不行的。 <img :src="require(icon)" alt="" /> 2、解决怎么解

解决vue项目打包后提示图片文件路径错误的问题

08-27

在 Vue 项目中，经常会遇到一个问题，即在生产环境下，图片文件路径错误的问题。这主要是因为在生产环境下，文件目录结构发生了变化，从而导致图片文件路径错误。今天我们将介绍如何解决这个问题。首先，让我们...

vue 解决data中定义图片相对路径页面不显示的问题

10-14

总结，当在Vue的data中定义图片路径并遇到显示问题时，可以尝试使用绝对路径或通过 `require` 动态引入。同时，配合Webpack的别名配置，可以进一步优化代码的可读性和可维护性。确保正确理解Vue对静态资源的处理方式...

vue中img src 动态加载本地json的图片路径写法

10-17

总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...

vue cli3.0打包上线静态资源找不到路径的解决操作

10-15

在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...

Vue CLI3搭建的项目中路径相关问题的解决

10-18

- 模板或 CSS 中通过相对路径（以 `.` 开始或直接以文件（夹）名开头）引用。 - URL 以 `~` 或 `@` 开头，分别作为模块请求处理。对于静态资源，我们需要根据需要决定是否要让 webpack 进行处理。例如，对于不需...

vue中图片路径以变量形式require传入

weixin_44770377的博客

06-02

4829

data() { return { zwtpImg:require('../../../public/img/zwtp.png') } }

vue用变量代替图片src路径解决方案

【03】的博客

11-28

9612

vue用变量代替图片src路径3种解决方案方法1：用网络图片直链 html <template> <img :src='imgSrc'/> </template> js export default { data(){ return{ imgSrc:'http://pic.qiantucdn.com/58pic......

关于使用require加载动态路径的图片

RussW0的博客

10-10

3298

<img v-for="(el,index) in list :src="el.img_url" :key="index" /> //处理图片路径 this.list.forEach(el=>{ let img = null; try { img = require('@/assets/images/'+el.img_name+'.png') } catch (err) {//图片不存在则使用默认的图片 img = require('@/

Vue.js中引入图片路径的几种方式

sunhonghui9527的博客

07-07

1万+

vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理： 1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如 <img src="..."、background: url(...) 和 CSS @import 的资源写在 template 中内联 style 的 background: url(...) 样式，在当前版本的测试中，即使使用了相对路径也不会被

vue3 如何引入静态资源图片

weixin_45102212的博客

06-01

4892

vue3如何引入静态资源

VueCli动态加载图片踩坑，如何使用require(变量)动态获取图片

weixin_43732080的博客

04-17

8132

VueCli动态加载图片踩坑，如何使用require(变量)动态获取图片使用字符串拼接，实现动态加载图片：require("@/" + src) 看个简单例子就懂了在template里引用方法getImgUrl()： <div v-for="(item, index) in dataImg" :key="index"> <img :src="getImgUrl(item...

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

我总是词不达意的博客

07-20

3万+

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

vue 引入上级静态image

07-12

你可以使用Vue的`require`语法来引入上级目录中的静态图片。假设你的项目结构如下： ``` - src - components - MyComponent.vue - assets - images - myImage.jpg ``` 在`MyComponent.vue`中引入上级目录中的静态图片，你可以使用以下代码： ```javascript <template> <div> <img :src="require('@/assets/images/myImage.jpg')" alt="My Image"> </div> </template> ``` 在`require`语法中，`@`表示`src`目录的别名，因此可以直接使用`@`来代表`src`目录。然后，你可以使用相对路径引用`assets/images/myImage.jpg`。这样，你就可以在Vue组件中成功引入上级目录中的静态图片了。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交