首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

img src在Vue js中不起作用,必须有正确的路径?

在Vue.js中,img src用于指定图片的路径。如果img src不起作用,通常是由于以下几个原因:

  1. 路径错误:确保img src中指定的路径是正确的。路径可以是相对路径或绝对路径。相对路径是相对于当前文件的路径,而绝对路径是从根目录开始的完整路径。
  2. 图片不存在:检查指定路径下是否存在该图片文件。如果图片不存在,img src将无法正常工作。
  3. 静态资源处理:在Vue.js中,静态资源(如图片)通常需要通过webpack等构建工具进行处理。确保你的构建配置正确,可以正确地处理和加载静态资源。
  4. 组件引用错误:如果你在Vue组件中使用img src,确保正确引用了该组件。检查组件的路径和命名是否正确。
  5. Vue模板语法错误:确保你在Vue模板中正确使用了img src,并且没有语法错误。检查是否有遗漏的引号、括号或其他语法错误。

对于Vue.js中img src不起作用的问题,可以尝试以下解决方法:

  1. 检查路径:确认img src中的路径是否正确,可以尝试使用绝对路径或相对路径。
  2. 检查图片文件:确认指定路径下是否存在该图片文件,可以尝试使用其他图片进行测试。
  3. 检查构建配置:如果使用了构建工具(如webpack),确保配置正确,可以正确处理和加载静态资源。
  4. 检查组件引用:确认是否正确引用了包含img src的组件,检查组件的路径和命名是否正确。

如果以上方法仍然无法解决问题,可以提供更多的代码和错误信息,以便更好地帮助你解决问题。

关于腾讯云相关产品,腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等。你可以根据具体需求选择适合的产品。更多关于腾讯云产品的介绍和详细信息,可以访问腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

自定义事件 Vue.js 组件应用

图片 Vue.js 组件自定义事件可以让子组件向父组件传递数据,非常方便实用。...使用自定义事件时,我们可以使用 v-on 来绑定事件,每个 Vue 实例都实现了事件接口,即使用 $on(eventName) 监听事件和使用 $emit(eventName) 触发事件。...此外,父组件,我们可以使用 v-on 来监听子组件触发事件。...({ el: '#app', data: { num: 100, }, }); 总的来说,Vue.js 组件自定义事件和 v-model 机制非常强大,能够让我们更加方便地进行组件间数据交互...需要注意是,使用自定义事件时,我们应该避免出现命名冲突,以免产生不必要错误。同时,使用 v-model 时,我们也要注意传入 props 和事件名对应关系。

3.9K20

VUE打包图片加载失败问题

JS中生成图片标签后,再设置图片路径时。 当你吃着火锅唱着歌,一路npm-run-dev都相安无事时候,打包完事后,发现突然图片显示异常了!...如果你观察后,你会发现组件中使用img标签都没任何问题,我们css背景图片以及js后加载图片无法正常显示。 这时候就已经可以发现不是图片本身出现问题了。.../static/img/这种也可能会出现问题.png'; _this.appendChild(imgAge) 解决 当我们看过报错信息后会发现,是因为图片路径问题,statich后面多加了两层文件...,而他们是不存在,这就导致了无法找到图片正确路径。...更改build/utils.js文件 ExtractTextPlugin options配置项. if (options.extract) { return ExtractTextPlugin.extract

2K50

Webpack(二):使用 loader

2.1 css 引用 这里我们 src 下新建 img 文件夹,里面放 test1.jpg 和 tets2.jpg,一张大于8kb,一张小于8kb。...也就是说,其实这时候 webpack 认为我们 index.html文件 dist 文件夹,所以选择了这样路径引用,但其实我们 index.html文件在外层。.../dist/img 才能顺利找到图片,也就是说,我们可以原本路径(图片名)基础上加一个固定前缀(./dist/img),使之正确指向图片位置(./dist/img/图片名)。...2.2 js 引用 js 引用图片需要使用 require,举个例子: // module2.js // require 拿到图片路径字符串 var img = require('...../js/module2.js'; document.body.innerHTML = demo; 只管根据图片和 module2.js 路径关系正常引入图片即可,后面路径会被正确替换。

91620

vue如何动态加载本地图片

以下正文: 今天遇到一个vue文件引入本地图片问题,于是有了这篇文章。 通常,我们一个img标签在html是这么写: <img src=".....配置publicPath路径: //vue.config.js module.exports = { publicPath:'/foo/', ... } 结论 静态资源可以通过两种方式进行处理...用绝对路径引入时,路径读取是public文件夹资源,任何放置 public 文件夹静态资源都会被简单复制到编译后目录,而不经过 webpack特殊处理。...前缀,publicPath 是部署应用包时基本 URL,需要在 vue.config.js 中进行配置。...扩展 关于vue file-loader vs url-loader 如果我们希望页面引入图片(包括imgsrc和backgroundurl)。

3.9K20

Vue3.0入门 + Vant3.0移动端实践(二)轮播图模块封装及首页完善

记录下之前遇到问题,Vueimg图像src变成"[object Module]"无法正确加载问题。 我vue项目的js代码,使用了"imgUrl"=require('.....-- built files will be auto injected --> 以下是轮播图模块封装,本地图片放在public目录里,使用时直接引入路径即可: ...vue39月18号晚上发布了,vue3对响应式数据声明官方给出了ref()和reactive()这两种方式。...Vue中使用可以直接使用ref (template),Vue会自动添加.value。Js中使用ref需要.value。 setup函数必须有返回值,必须返回个对象。...setup函数有一个props参数,用于接收props,也就是定义组件上属性(同vue2),但是接收props必须先在props属性定义,否则是不会被接收到。

1.3K20

vue搭建项目及配置

B:假如我打开地址是:http://123.com/nice/app,配置了模块,或者放置了子文件夹下面,那么就会出问题。其实,这是因为router无法找到路径组件,所以也就无法渲染了。...只需要修改routerindex.js,加一个基础路径就可以了。...因为:vue实际应用,computed属性可以输出前,对data值进行改变,因此,我们就是利用computed这一特性,组件获取vuexstate对象属性。 b....$store.state.count; } } 这里需要说明是:因为store之前已经mian.js中进行了全局引入,因此,vue组件,就可以使用 this....配置背景图片路径 -- 打包后css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片,build->utils.js 配置路径

3.1K30

Vue处理静态资源及publicstaticassets目录区别

Vue 是如何处理静态资源Vue 静态资源可以通过两种方式进行处理: 1、 JavaScript 被导入或在 template/CSS 通过相对路径被引用。.../image.png') }}) 在其内部,Vue 通过 file-loader 用版本哈希值和正确公共基础路径来决定最终文件路径,再用 url-loader 将小于 4kb 资源内联,以减少 HTTP...(仅作用于模版) public 文件夹 任何放置 public 文件夹静态资源都会被简单复制,而不经过 webpack 。需要通过绝对路径来引用。...我也进行了多次尝试: 项目的 src 目录分别创建了 assets 和 static 目录, .vue 文件中进行引用: .../static/w3h5.png" alt=""> 发现都会处理,查看 Vue app.js 源码可以发现: r("img", { attrs: { src: e("ca4c"), alt: ""

79520

Vue处理静态资源及publicstaticassets目录区别

Vue 是如何处理静态资源Vue 静态资源可以通过两种方式进行处理: 1、 JavaScript 被导入或在 template/CSS 通过相对路径被引用。.../image.png') }}) 在其内部,Vue 通过 file-loader 用版本哈希值和正确公共基础路径来决定最终文件路径,再用 url-loader 将小于 4kb 资源内联,以减少 HTTP...(仅作用于模版) public 文件夹 任何放置 public 文件夹静态资源都会被简单复制,而不经过 webpack 。需要通过绝对路径来引用。...我也进行了多次尝试: 项目的 src 目录分别创建了 assets 和 static 目录, .vue 文件中进行引用: .../static/w3h5.png" alt=""> 发现都会处理,查看 Vue app.js 源码可以发现: r("img", { attrs: { src: e("ca4c"), alt: ""

26.4K82

Vue 开发经验小记(持续更新)

使用 vue 开发过程遇到问题或知识点总结,持续更新… 最近更新:2019-11-29 1.国际化 国际化插件:vue-i18n 2.强制换行与禁止换行 让多行内容显示一行,多余用...表示 white-space...标签 src 动态绑定 1)路径固定图片 路径前加 require() bookingManageImg()...CLI 3 默认没有 vue.config.js根目录新建一个就好,位置跟 package.json 同级。...15. vue 与 安卓原生应用通信 我有一篇专门讲解vue与安卓双向通信文章: Android webview 与 js(Vue) 交互 16....当然有很多 "正确" 方式可以做到,比如 vuex,比如用父子组件通信,子组件改变值了发个通知通知父组件更新对应值。 但是,上面两种方法都比较麻烦。

2.8K30

Vue语法--插值操作&动态绑定属性 详解

在这里, 我们还使用setTimeout来模拟延时1秒显示状况. 样式表设置一个属性[v-cloak]display为none不显示....当new Vue()代码执行以后, 就是将元素v-cloak删除掉, 这样样式也不起作用. 我们来看看效果 ? 刚开始, 没有加载new Vue()元素时候, 就不显示div内容....可是, 除了内容, 有时我们希望动态绑定a标签src元素, 或者imgsrc元素, 这个时候, 我们可以用到v-bind指令 1. v-bind基本用法 v-bind指令有两种写法 第一种: <a...定义了src和href两个属性, 如果想要赋值给img表示和a标签, 不能直接像下面这么写....我们还可以是用v-bind缩写, 实际项目开发, 使用缩写概率更大 <a :href

2.7K10

Vue cli 资源文件引用 原

,每个模板看做单独页面,按我们正常路径引用 如components->footer.vue                 作为图片:<img src="...../assets/image/logo.png) no-repeat} 2、另一种情况根目录下static文件夹放置image ,js(一般第三方类库)文件夹 2-1 App.vue模板页面 作为图片.../static/image/logo.png) no-repeat} 总结:关于开发环境引用资源路径,其实与我们普通开发一样,只需关注当前文件与资源文件路径关系(每个模板文件就当做一个普通html...页面) 资源放置方法,通常是一些固定资源(如第三方插件,像jQuery等)与图片放在根目录下static文件夹,自己可能修改(自己写js或者css)文件放在assets文件夹下。...引用jQuery简单方法index.html页面通过script标签引入 (

1K20

18. vue-router案例-tabBar导航

: route }) // 第四步: 导出Route组件 export default vueRouter 第三步: main.js文件引入vueRouter import Vue from 'vue...给文件起别名 当我们路径很多时候, 比如上面我们抽象组件时候, 就发现, 文件位置换了, 很多路径都要跟着变. vue可以设置路径别名, 这样我们就不用在更换了文件位置以后更换路径了....build/webpack.base.conf.js文件, 有一个resolve选项 resolve: { extensions: ['.js', '.vue', '.json'],...后面使用到这个路径文件, 直接使用@/components就可以了 使用时候, 也分为几种场景 使用import引入组件路径 没有import, 比如图片路径 路由导航import 路径...图片等非import引入 比如我们MainTabBar.vue组件设置导航图标的时候, 有很多src, 之前我们都是这么写 <tab-bar-item path="/profile"

95330

使用Webpack5创建Vue2项目及优化

除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 文件上之外,请确保在你 webpack 配置添加 Vue Loader 插件: // webpack.config.js...安装url-loader npm i url-loader@4.1.1 file-loader@6.2.0 -D webpack.config.js添加处理url路径loader模块: {test...此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 问题。使用正确配置,webpack 将会在打包输出自动重写文件路径正确 URL。...> Word <img src="@/assets/imgs...JS缓存 babel-loader 开启缓存 babel 转译 js 过程时间开销比价大,将 babel-loader 执行结果缓存起来,重新打包时候,直接读取缓存 缓存位置: node_modules

2.5K10
领券