如何从本地文件夹而非网页链接为card组件添加图片

不需要修改card组件本身的核心逻辑，按以下步骤操作即可：

• 第一步：整理本地图片存放位置
  普通静态HTML项目可以在页面同级目录新建images文件夹，把需要用到的本地图片存入该文件夹；如果是Vue/React等带构建工具的前端项目，把图片放到项目约定的静态资源目录（比如public目录）即可，避免构建时资源路径解析错误。
• 第二步：替换data-image属性的远程地址
  把原有https://开头的远程图片链接，替换成本地图片的访问路径即可，普通静态项目直接写相对路径，构建类项目如果图片放在public目录可以直接写根路径。

修改后的参考代码如下：

<div id="appB" class="containerB">
    <div class="col-lg-6 col-md-12 order-first res-m-bttm-lg">
        <!-- 原远程链接已替换为本地images目录下的spain.jpg -->
        <card data-image="./images/spain.jpg">
            <h1 slot="header">Spain</h1>
            <p slot="content">Bet On Spain's Team playing against Portugal.</p>
            <p slot="content">ETj9Qy3r5DyXw87qEHyp5gXhruFMuicEUR</p>
        </card>
    </div>
</div>

常见踩坑提醒 #

• 路径写法注意：./代表当前HTML/组件文件所在的目录，../代表上一级目录，如果加载时图片报404错误，优先打开浏览器控制台的Network面板核对图片请求路径，对照实际文件存放位置调整路径即可。
• 文件名核对：建议提前打开系统的「显示文件扩展名」设置，避免出现spain.jpg.jpg这类重复后缀导致的图片加载失败问题。
• 构建工具项目注意：如果图片存放在assets这类需要编译处理的资源目录，不要直接写字符串路径，要么把图片移到public目录用根路径引用，要么先通过import语法导入图片变量，再把变量绑定到data-image属性上，避免构建后资源路径错乱。

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