网站更新提示ui怎末做,做前端的女生压力大吗,wordpress文章添加链接,自适应全屏网站问题#xff1a;两种图片路径的指定方式#xff0c;第一种能展示图片但第二种不能 两个 示例中#xff0c;图片展示的差异。 在第一个示例中#xff0c;图片路径是硬编码在 标签的 src 属性中的#xff1a;
img src../../assets/img/header01.png style…问题两种图片路径的指定方式第一种能展示图片但第二种不能 两个 示例中图片展示的差异。 在第一个示例中图片路径是硬编码在 标签的 src 属性中的
img src../../assets/img/header01.png stylewidth: 100%; height: auto; /这种方式直接指定了图片相对于当前文件的路径浏览器可以直接加载并显示图片。
然而在第二个示例中通过 Vue 的数据绑定功能来动态设置图片路径
img :srcscope.row.img stylewidth: 100%; height: auto; /能展示图片
el-table :datatableData stylewidth: 60%;font-size: 16px;color: blackel-table-column propimg label width180template #defaultscopeimg src../../assets/img/header01.png stylewidth: 100%; height: auto; //template/el-table-column/el-table但问题代码scope.row.img不能展示图片 并且在 tableData 中为 img 属性分配了一个相对路径字符串
div classbottom-containel-table :datatableData stylewidth: 60%;font-size: 16px;color: blackel-table-column propimg label width180template #defaultscopeimg :srcscope.row.img stylewidth: 100%; height: auto; //template{ img: ../../assets/img/header1.png, title: 公司電話, contain: 1233333,
}这里的问题可能在于使用 Webpack 或类似的模块打包器时相对路径字符串 ‘…/…/assets/img/header1.png’ 可能不会被正确处理为有效的 URL。Webpack 通常期望在 JavaScript 文件中使用 require 或 import 来引入静态资源这样它就可以将资源路径转换为打包后的输出路径。 所以直接在文件里引用目录文件下的静态资源图片
import header01 from ../../assets/img/header1.png;{img: header1,title: 公司電話,contain: 1233333,},成功拿到图片
