将 Flutter 应用迁移到 Flutter Web 时如何显示图像资产？

Posted 2023-02-23

【中文标题】将 Flutter 应用迁移到 Flutter Web 时如何显示图像资产？

【英文标题】：How to displays image assets while migration a flutter app to flutter web?

【发布时间】：2019-10-06 14:54:08

【问题描述】：

尝试将神社应用迁移到 Flutter Web，但迁移时无法在 localhost 显示图像（神社徽标放置在 assets 文件夹中），包含图像的 asserts 文件夹被放置在 Web 中Flutter Web migration guide 中解释的文件夹并使用正确的路径更新了 dart 代码，但它仍然不显示图像。

请提供解决方案，谢谢！

登录.dart

import 'package:flutter_web/material.dart';

    class LoginPage extends StatefulWidget 
      @override
      _LoginPageState createState() => _LoginPageState();
    

    class _LoginPageState extends State<LoginPage> 
      // TODO: Add text editing controllers (101)
      final _usernameController = TextEditingController();
      final _passwordController = TextEditingController();
      // TODO: Add text editing controllers (101)
      @override
      Widget build(BuildContext context) 
        return Scaffold(
          body: SafeArea(
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 24.0),
              children: <Widget>[
                SizedBox(height: 80.0),
                Column(
                  children: <Widget>[
                    Image.asset('web/assets/diamond.png'),
                    SizedBox(height: 16.0),
                    Text('SHRINE'),
                  ],
                ),
                SizedBox(height: 120.0),
                // TODO: Wrap Username with AccentColorOverride (103)
                // TODO: Remove filled: true values (103)
                // TODO: Wrap Password with AccentColorOverride (103)
                // TODO: Add TextField widgets (101)
                // [Name]
                TextField(
                  controller: _usernameController,
                  decoration: InputDecoration(
                      filled: true,
                      border: OutlineInputBorder(),
                      labelText: 'Username'),
                ),
                SizedBox(
                  height: 12.0,
                ),
                // [Password]
                TextField(
                  controller: _passwordController,
                  decoration: InputDecoration(
                    filled: true,
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                  obscureText: true,
                ),
                // TODO: Add button bar (101)
                ButtonBar(
                  children: <Widget>[
                    // Todo Add buttons (101)
                    RaisedButton(
                      child: Text('Cancel'),
                        onPressed: () 
                          // TODO: Clear the text fields (101)
                          _usernameController.clear();
                          _passwordController.clear();
                        
                    ),
                    // TODO: Add an elevation to NEXT (103)
                    // TODO: Add a beveled rectangular border to NEXT (103)
                    RaisedButton(
                      child: Text('NEXT'),
                      onPressed: () 
                        // TODO: Show the next page (101)
                        Navigator.pop(context);
                      ,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );[enter image description here][1]
      
    

    // TODO: Add AccentColorOverride (103)

【问题讨论】：

您不必将资产路径添加到您的pubspec.yml吗？

没有迁移指南显示 ## REMOVE ## 对于预览，资产的处理方式不同。将此部分删除或注释掉##。

【参考方案1】：

需要直接定义asset，不用在**中定义路径 颤振网页预览 **

Image.asset('diamond.png')

【讨论】：

如果它解决了您的问题，请接受您的回答。

所有路径都相对于 assets/ 文件夹。因此，将图像添加到我们领先的<file>，而不是assets/<file>

在它提示的 2 天内我无法接受我的答案。