如何让百度更新网站收录,seo快速排名软件平台,贵州省建设厅官方网站考证,没有网站怎么做cps目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展#xff08;图片不显示#xff09; 前言 #x1f91f; 找工作#xff0c;来万码优才#xff1a;#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中#x… 目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展图片不显示 前言 找工作来万码优才 #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中图片的引用方式主要取决于图片存放的位置常见的存放方式包括
存放在 public/ 目录存放在 assets/ 目录存放在远程服务器动态拼接图片路径
本文将详细分析这些方式的区别并提供完整的代码示例和注释
1. 引用 public/ 目录
public/ 目录下的文件会被 Vue 直接映射到项目的根路径 /无需 Webpack 处理适用于
不会被打包处理的静态资源图片 URL 确定不依赖 Webpack 解析
✅ 正确写法
templatediv!-- 直接从 public 目录访问图片 --img src/manufacturing.png altManufacturing Image //div
/template❌ 错误写法
templatediv!-- public 目录不需要 public/ 前缀 --img src/public/manufacturing.png altError Image //div
/template说明 public/ 目录的内容会被 Vue 直接映射到根路径 /所以访问 /public/xxx.png 是错误的
截图如下 2. assets/ 目录
适用场景 assets/ 目录下的图片会被 Vue 通过 Webpack 进行打包适用于
存放在 src/assets/ 目录需要 Webpack 处理如哈希命名图片路径动态变化
✅ 使用 import 方式
script setup
import imageUrl from /assets/images/manufacturing.png
/scripttemplatedivimg :srcimageUrl altManufacturing Image //div
/template说明 import 方式会将图片路径解析为 Webpack 处理的 URL 适用于静态导入但不适用于动态路径拼接
✅ 使用 new URL() 方式
script setup
const imageSrc new URL(/assets/images/manufacturing.png, import.meta.url).href
/scripttemplatedivimg :srcimageSrc altManufacturing Image //div
/template说明 new URL() 适用于 assets 目录支持动态路径处理
3. 远程服务器
适用场景
图片存放在 CDN 或外部服务器不需要 Webpack 处理
templatedivimg srchttps://example.com/images/manufacturing.png altRemote Image //div
/template说明 直接使用绝对 URL 访问远程图片无需 Vue 处理
4. Vue Router 动态访问
图片名称与路由路径相关联可以使用 computed 计算属性自动生成图片路径
templatedivimg :srcimageSrc altDynamic Page Image //div
/templatescript setup
import { useRoute } from vue-router
import { computed } from vueconst route useRoute()// 计算 public 目录下的图片路径
const imageSrc computed(() {const sanitizedPath route.path.replace(/^\//, ) // 移除开头的 /return /${sanitizedPath}.png // 访问 public 目录
})
/script假设 public 目录结构如下
public/
├── home.png
├── about.png
├── contact.png访问 /home 时图片路径为
img src/home.png /动态路由的方式有所差异
templatedivimg :srcimageSrc altDynamic Page Image //div
/templatescript setup
import { useRoute } from vue-router
import { computed } from vueconst route useRoute()// 计算 public 目录下的图片路径
const imageSrc computed(() {const sanitizedPath route.path.replace(/^\//, ) // 移除开头的 /const lastSegment sanitizedPath.split(/).pop() // 获取最后的路径部分return /${lastSegment}.png // 访问 public 目录
})
/script截图如下 5. 总结
总的来说
存放位置适用场景访问方式代码示例public/直接访问无需 Webpack 处理/filename.pngimg src/manufacturing.png /assets/需要 Webpack 处理import 或 new URL()import img from /assets/image.png远程服务器图片在外部服务器/CDN绝对 URLimg srchttps://example.com/image.png /动态路由根据 Vue Router动态生成图片路径computed 计算属性 :src“computedPath”
最佳实践
public/ 目录适用于静态资源直接使用 /filename.png 访问assets/ 目录适用于 Webpack 处理使用 import 或 new URL()外部图片直接使用绝对 URL动态图片路径可结合 Vue Router 计算生成
6. 扩展图片不显示
图片无法显示通常是路径错误、资源未正确加载或 Webpack/Vite 处理导致的问题
图片不显示的常见原因 在 Vue 3 Vite或 Webpack项目中图片可能无法显示的常见原因包括
路径错误引用 public/ 目录时仍加 public/ 前缀资源未正确加载如 src/assets/ 目录下的图片未被 Webpack 处理动态路径问题使用 computed 计算属性拼接路径时错误Webpack 处理方式assets/ 目录下的图片会被 Webpack 处理不能直接访问图片格式或大小问题浏览器不支持的图片格式或图片损坏
路径错误这个要点此处着重分析下 详细分析下为何要放在public等路径下
public/ 目录的映射机制 在 Vue 项目结构中
my-project/
├── public/
│ ├── manufacturing.png
│ ├── images/
│ │ ├── factory.png
├── src/
│ ├── views/
│ │ ├── Industry.vue
│ ├── assets/
│ │ ├── example.png
│ ├── App.vuepublic/manufacturing.png 在构建后会被 Vue 直接映射到/manufacturing.png public/images/factory.png 在构建后会变成/images/factory.png src/assets/example.png 则会被 Webpack 处理并生成动态路径如 /assets/example.abcdef.png
如何证明 public/ 目录直接映射到根路径 / 可以打开 http://localhost:5173/manufacturing.png如果 manufacturing.png 直接显示则说明它已经被映射到根目录 /而不需要 /public/manufacturing.png
对比 public/ 和 src/assets/
存放目录是否被 Webpack 处理访问方式适用场景public/❌否/filename.pngsrc/assets/✅是import 或 new URL()
✅ 使用 public/ 目录
templatedivimg src/manufacturing.png altManufacturing Image //div
/template✅ 使用 src/assets/ 目录
script setup
import imgUrl from /assets/example.png
/scripttemplatedivimg :srcimgUrl altExample Image //div
/template
