如何在Vue中正确显示图片？本地资源路径加载失败如何解决？

问题原因 #

你在v-bind(:src)中直接传入静态相对路径字符串时，Vue的构建工具（Webpack/Vite）不会将该路径识别为需要处理的资源引入，只会原样输出字符串，打包后资源路径发生变化就会导致加载失败。

解决方案 #

按你的使用场景对应选择即可：

1. 引入后绑定（通用方案，推荐）
   先在<script>部分引入需要的图片，再绑定到src属性：

// 路径根据你的文件位置调整，@默认指向src目录
import BicepImg from '@/assets/images/workouts/Bicep.png'
import TricepExtensionImg from '@/assets/images/workouts/TricepExtension.png'

// 如果你要统一放到images对象里调用，也可以这么写
const images = {
  bicep: BicepImg,
  tricep: TricepExtensionImg
}

模板部分直接绑定变量即可：

<figure class="workout-image">
  <img :src="images.bicep" width="200px" height="300px">
  <figcaption>Bicep Curl</figcaption>
</figure>

2. Vite环境动态解析路径
   如果需要动态拼接路径可以用该方法：

<img :src="new URL('../assets/images/workouts/TricepExtension.png', import.meta.url).href" width="200px" height="300px">

3. Vue CLI/Webpack环境动态解析路径
   用require包裹路径即可：

<img :src="require('../assets/images/workouts/TricepExtension.png')" width="200px" height="300px">

额外注意 #

• 你代码中用到的length属性不是img标签的合法属性，控制图片高度请用height属性
• 你写的第二种外网图片路径如果加载失败，优先检查网络是否能正常访问该链接，是否存在跨域限制

内容的提问来源于stack exchange，提问作者user17528335