Vue.js中的图片引用路径的方式

最新推荐文章于 2024-11-04 11:46:41 发布

丸子妹

最新推荐文章于 2024-11-04 11:46:41 发布

阅读量1.3k

点赞数

分类专栏：前段学习

前段学习专栏收录该内容

12 篇文章

订阅专栏

https://www.jb51.net/article/119782.htm
要么需要import，要么需要把图片放在static文件夹下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

丸子妹

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue.config.js中配置Vue的路径别名的方法

10-15

总结起来，通过`vue.config.js`中的`configureWebpack`和`resolve.alias`配置，我们可以有效地管理和优化Vue项目的路径引用，提升开发效率。在实际项目中，根据需求自由定制这些别名，可以使代码更加简洁易读，同时...

vue - vue.config.js中devServer配置方式

10-16

在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口...

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

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前面多了/

vue项目中，如何正确引入图片路径

popstarqq的博客

07-06

518

js中需要使用图标类；imgUrl:require('../../assets/images/map/truck2.png'), css中 background:url(../../assets/images/map/routeTrack--routeNavigation__bg.png) img标签 <imgsrc="@/assets/images/svg/png/jiaohuan.png"/> ...

如何在vue中引入图片？

weixin_33851177的博客

02-24

1108

当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：使用一、我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后，在template模板里面 <img :src="imgUrl"> /*或者*/ <img src="../assets/logo.png"> 这种方式是按照正常...

Vue项目中该怎么引入图片（vue项目中图片的引用方式）

Yongqiang Chen的博客

08-25

2458

1.在vue项目中使用require的方式引入图片 //home.vue文件 <template> <div class='home'> <img :src="img.save"> </div> </template> <script> export default { name: 'home', data () { return { img

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

10-16

总结以上方法，Vue.js中引入图片路径主要依赖于在构建过程中对资源引用的处理机制。合理使用相对路径和`require`方法，以及正确配置公共路径前缀，可以使得应用资源在不同部署环境下都能被正确引用。开发者需要根据...

vue3 快速入门 (三) : vue中的图片路径

朱豪凯的博客

07-17

3757

介绍在Vue3中，引用图片路径的3种方式

Vue.js中的图片引用路径问题

weixin_30673715的博客

07-25

454

当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：使用一：在data里面定义好图片路径： /*错误写法*/ imgUrl:'../assets/logo.png' 在template模板里面：/*错误写法*/ <img src="{{imgUrl}}"> 以上是错误写法，我们应该用v-bi...

vue项目中在data里引入图片的路径方法

故里的博客

06-16

1819

今天在vue项目中遇到了引入本地图片路径报错的问题，百度之后整理了一下，欢迎有遇到相同问题的小伙伴参考~ 1.先来展示一下报错代码 data() { return { img:"@/assets/img/img.png", }; } 2.正确引入路径代码方法一： data() { return { img:require("@/assets/img/img.png"), }; } 方法二： import img from '

vue动态引入图片路径

m0_50441807的博客

07-22

513

上面的例子图片并没有渲染出来，说明图片引入不成功，可以使用。

vue引入图片的方式

weixin_45765215的博客

12-11

1405

在 vue 项目中，常用的引入图片的方式有 4 种。

vue中动态引入图片路径

m0_44949211的博客

03-03

631

vue中动态引入图片路径使用img标签显示图片时，使用require动态引入图片路径 <img :src="weather ? require(`../../../assets/mainHome/${weather}.png`) : ''"/>

vue项目中如何引入图片

donghua201的博客

10-30

2838

require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量。import 是解构过程，但是目前所有的引擎都还没有实现 import，我们在 node 中使用 babel 支持。，也仅仅是将 ES6 转码为 ES5 再执行，在变量中使用require引入地址。直接将图片引入为模块使用。

vue中图片引入与使用几种方式

木昆灵寒酥的博客

05-14

1755

将编写代码时定义的路径转换为编译打包后的路径。

vue 引入图片路径问题

qq_30436011的博客

12-02

1783

方法一.：直接将你的图片源文件放在项目目录的static或public文件夹里，然后和正常写图片路径那样写就可以了方法二：文件放在asset中，需要将路径转换为编译打包后的路径。如果是直接在img标签或者css中使用，可以直接引入路径，打包会处理但是如果是作为字符串的形式使用，需要使用request 或import的方式来引入，加入打包行列 imageUrl: require('../../assets/logo.png') import img from "../../assets/lo.

Vue 引入图片

2401_87546826的博客

11-04

2566

│ └── my-image.png 在 Vue 组件中访问图片（注意：这里使用的是相对路径，Webpack 会处理这些路径）： html 在构建后，这些资源会被处理并放在最终的 dist 目录中，但你不能直接通过浏览器访问 dist/assets 目录下的资源，因为它们是由 Webpack 打包的一部分。将图片放在 public 目录中 Vue CLI 创建的项目中有一个 public 文件夹，这个文件夹中的所有内容都会在构建时被复制到最终的 dist 目录中，并且可以直接通过根 URL 访问。

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

qq_41605119的博客

10-26

248

https://blog.csdn.net/sunhonghui9527/article/details/107188395/

vue.config.js 引用/js/vue.js404

最新发布

01-13

### Vue.config.js 引用 js/vue.js 404 错误解决方案当遇到 `vue.config.js` 中引用 `/js/vue.js` 出现 404 错误的情况时，通常是因为路径设置不当或是资源未被正确打包。为了确保文件能够正常加载，需调整配置中的 `publicPath` 和静态资源管理。 #### 调整 publicPath 设置如果项目的部署环境不是根目录，则需要修改 `vue.config.js` 的 `publicPath` 属性： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' }; ``` 此配置使得生产环境下相对路径指向当前目录下的资源，在开发模式下则保持默认行为[^1]。 #### 正确放置静态资源对于外部引入的 JavaScript 文件如 `vue.js`，建议将其放入 `public/js/` 目录内而不是通过模块化方式安装。这样可以直接访问这些文件而无需经过 Webpack 打包过程。因此应确保 `vue.js` 存在于 `public/js/` 下，并在 HTML 模板中按如下方式引用： ```html <script src="/js/vue.js"></script> ``` 注意这里的斜杠表示相对于站点根部的位置，适用于大多数情况；但如果设置了自定义的 `publicPath` 或者多级子路由，请相应调整路径前缀[^3]。 #### 修改 devServer 输出路径有时即使上述操作无误仍可能出现找不到文件的现象，这可能是由于开发服务器未能正确映射到公共文件夹所致。可以在 `devServer` 配置项里指定额外选项以改善这一状况： ```javascript module.exports = { // ...其他配置... devServer: { contentBase: path.join(__dirname, 'public'), compress: true, port: 9000 } } ``` 这里指定了 `contentBase` 参数让开发服务知道去哪里寻找公共资源，从而避免因路径解析错误而导致的 404 响应码[^2]。